1
1
# react redux 服务端渲染(同构)实战总结
2
2
3
- react redux 服务端渲染 同构
3
+ 标签(空格分隔): react redux 服务端渲染 同构
4
4
5
5
---
6
6
7
+ ## 说明
8
+ 此项目大部分参考了[ Jokcy] [ 1 ] 在某网课的教程,然后加以实践与改进
7
9
8
10
## 有关服务端渲染
9
11
10
- 关于什么是服务端渲染,为什么用服务端渲染及什么是同构这里就不多做介绍,关于它们的介绍很多,可参考[ 链接] [ 1 ]
11
- ## [ 项目demo链接] [ 2 ]
12
+ 关于什么是服务端渲染,为什么用服务端渲染及什么是同构这里就不多做介绍,关于它们的介绍很多,可参考[ 链接] [ 2 ]
13
+ ## [ 项目demo链接] [ 3 ]
12
14
13
15
14
16
## 渲染流程
25
27
26
28
st->op->op2->op3->op4->op5->op6->op7->e
27
29
```
28
- ![ 渲染流程] [ 3 ]
30
+ ![ 渲染流程] [ 4 ]
29
31
## 关键点
30
32
* 客户端与服务端用到的组件是一样的,但是两者的入口不一样。
31
33
服务端组件的入口server-entry.js代码
@@ -61,7 +63,7 @@ export default (routerContext, url, helmetContext) => (
61
63
62
64
```
63
65
64
- * react-async-bootstrapper 具体介绍可看[ 链接] [ 4 ]
66
+ * react-async-bootstrapper 具体介绍可看[ 链接] [ 5 ]
65
67
可在react组件上执行方法,可用于数据的获取。
66
68
可在服务端执行bootstrap方法用来获取页面的数据,注意返回一个promise
67
69
``` javascript
@@ -84,7 +86,7 @@ export default class Index extends React.Component {
84
86
}
85
87
}
86
88
```
87
- * react-helmet-async 具体介绍可见[ 链接] [ 5 ]
89
+ * react-helmet-async 具体介绍可见[ 链接] [ 6 ]
88
90
可在react组件中设置title meta等标签
89
91
90
92
* 在浏览器中输入url,页面的请求被node接受到后。
@@ -193,7 +195,7 @@ const render = (Component) => {
193
195
194
196
## 遇到的其他问题
195
197
* 服务端执行bootstrap发起请求获取数据时,请求头等信息会丢失,比如req.headers,ip等信息。
196
- 解决方案:bootstrap方法的第三个参数中的数据会设置到react context里。具体说明见[ 文档] [ 6 ]
198
+ 解决方案:bootstrap方法的第三个参数中的数据会设置到react context里。具体说明见[ 文档] [ 7 ]
197
199
``` javascript
198
200
// \server\util\server-render.js
199
201
bootstrapper (app, {}, {
@@ -252,13 +254,14 @@ const baseUrl = process.env.API_BASE || '' // 服务端渲染请求的url必须
252
254
```
253
255
254
256
* import css 使用style-loader失效,因为服务端没有document对象,因此使用提取css文件的形式
255
- 后面在总结项目时,发现[ webpack-isomorphic] [ 7 ] 可以设置style里面的样式
257
+ 后面在总结项目时,发现[ webpack-isomorphic] [ 8 ] 可以设置style里面的样式
256
258
257
259
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