Skip to content

Commit dd69009

Browse files
committed
readme 添加说明
1 parent 1609623 commit dd69009

File tree

1 file changed

+18
-15
lines changed

1 file changed

+18
-15
lines changed

Diff for: README.md

+18-15
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
# react redux 服务端渲染(同构)实战总结
22

3-
react redux 服务端渲染 同构
3+
标签(空格分隔): react redux 服务端渲染 同构
44

55
---
66

7+
## 说明
8+
此项目大部分参考了[Jokcy][1]在某网课的教程,然后加以实践与改进
79

810
## 有关服务端渲染
911

10-
关于什么是服务端渲染,为什么用服务端渲染及什么是同构这里就不多做介绍,关于它们的介绍很多,可参考[链接][1]
11-
## [项目demo链接][2]
12+
关于什么是服务端渲染,为什么用服务端渲染及什么是同构这里就不多做介绍,关于它们的介绍很多,可参考[链接][2]
13+
## [项目demo链接][3]
1214

1315

1416
## 渲染流程
@@ -25,7 +27,7 @@ e=>end
2527
2628
st->op->op2->op3->op4->op5->op6->op7->e
2729
```
28-
![渲染流程][3]
30+
![渲染流程][4]
2931
## 关键点
3032
* 客户端与服务端用到的组件是一样的,但是两者的入口不一样。
3133
服务端组件的入口server-entry.js代码
@@ -61,7 +63,7 @@ export default (routerContext, url, helmetContext) => (
6163

6264
```
6365

64-
* react-async-bootstrapper 具体介绍可看[链接][4]
66+
* react-async-bootstrapper 具体介绍可看[链接][5]
6567
可在react组件上执行方法,可用于数据的获取。
6668
可在服务端执行bootstrap方法用来获取页面的数据,注意返回一个promise
6769
```javascript
@@ -84,7 +86,7 @@ export default class Index extends React.Component {
8486
}
8587
}
8688
```
87-
* react-helmet-async 具体介绍可见[链接][5]
89+
* react-helmet-async 具体介绍可见[链接][6]
8890
可在react组件中设置title meta等标签
8991

9092
* 在浏览器中输入url,页面的请求被node接受到后。
@@ -193,7 +195,7 @@ const render = (Component) => {
193195

194196
## 遇到的其他问题
195197
* 服务端执行bootstrap发起请求获取数据时,请求头等信息会丢失,比如req.headers,ip等信息。
196-
解决方案:bootstrap方法的第三个参数中的数据会设置到react context里。具体说明见[文档][6]
198+
解决方案:bootstrap方法的第三个参数中的数据会设置到react context里。具体说明见[文档][7]
197199
```javascript
198200
// \server\util\server-render.js
199201
bootstrapper(app, {}, {
@@ -252,13 +254,14 @@ const baseUrl = process.env.API_BASE || '' // 服务端渲染请求的url必须
252254
```
253255

254256
* import css 使用style-loader失效,因为服务端没有document对象,因此使用提取css文件的形式
255-
后面在总结项目时,发现[webpack-isomorphic][7]可以设置style里面的样式
257+
后面在总结项目时,发现[webpack-isomorphic][8]可以设置style里面的样式
256258

257259

258-
[1]: https://juejin.im/entry/58f484fd44d904006c034079
259-
[2]: https://github.com/buyixiaojiang/react-redux-ssr-template
260-
[3]: https://wscdn.ql1d.com/38727889489664957980.png
261-
[4]: https://www.npmjs.com/package/react-async-bootstrapper
262-
[5]: https://www.npmjs.com/package/react-helmet-async
263-
[6]: https://www.npmjs.com/package/react-async-bootstrapper
264-
[7]: https://www.npmjs.com/package/webpack-isomorphic
260+
[1]: https://github.com/Jokcy
261+
[2]: https://juejin.im/entry/58f484fd44d904006c034079
262+
[3]: https://github.com/buyixiaojiang/react-redux-ssr-template
263+
[4]: https://wscdn.ql1d.com/38727889489664957980.png
264+
[5]: https://www.npmjs.com/package/react-async-bootstrapper
265+
[6]: https://www.npmjs.com/package/react-helmet-async
266+
[7]: https://www.npmjs.com/package/react-async-bootstrapper
267+
[8]: https://www.npmjs.com/package/webpack-isomorphic

0 commit comments

Comments
 (0)