服务器端渲染主要有两个优势，一是加快首屏渲染时间，二是有利于SEO。本文将通过图文简要分析一下服务器渲染如何减少首屏渲染时间。
我们来看看服务器端与客户端渲染的流程图：
Screen Shot 2017-04-13 at 21.57.20.png
Screen Shot 2017-04-13 at 21.57.29.png
Screen Shot 2017-04-13 at 21.57.36.png
图一为客户端渲染流程图，图二，三为服务器端渲染流程图。
两个渲染图都可以分为两个阶段：
一：客户端发送请求，服务器端返回html文件。
二：客户端请求js文件，下载完成后本地建立react实例。
尽管服务器渲染第一阶段的流程图很长，但是因为服务器渲染速度很快，因此实际耗时与客户端渲染几乎相同。
第一阶段结束时，服务器端返回渲染结果，用户即可看到首屏。而对于客户端渲染，需要等待一次脚本下载时间，以及在客户端的渲染时间。由于客户端的硬件以及网络条件的差异，这两段时间开销可能十分显著。
客户渲染与服务器渲染第二阶段基本一致。所不同的是，服务器渲染流程中，在客户端生成vdom后，并不会重新渲染，而是比较现有dom的checksum来决定是否重新渲染。
实战中的服务器端渲染需要配置很多问题，比如说：
- 如何保持前后端数据一致
- 如何在后端进行路由，且和前端共享路由代码
- 服务器端如何打包静态资源
前后端数据一致
我们假设使用redux作为store。在服务器渲染时，将store传入渲染函数，随后将store作为全局变量插入到返回的html文件中。
在客户端文件中，使用该全局变量作为store的初始值。代码片段如下：
//server side
var root = renderToString(
<Provider store={store}>
<RouterContext {..._renderProps}/>
</Provider>
)
ctx.render('home', {
root,
state: store.getState()
})
//view template
script.
window.REDUX_STATE = !{JSON.stringify(state)}
//client side
const store = configureStore(window.REDUX_STATE);
路由控制
首先将具体的路由提取到单一文件中。
const routes = (
<Route path="/" component={NavBar}>
<IndexRoute component={App} />
<Route path="/Person" component={Person} />
<Route path="/Profile" component={Profile} />
</Route>
)
随后在客户端与服务器端：
//客户端
<Provider store={store}>
<Router history={browserHistory}>
{routes}
</Router>
</Provider>
//服务器
match({routes, location: ctx.url}, (error, redirectLocation, renderProps) => {
_renderProps = renderProps
});
<Provider store={store}>
<RouterContext {..._renderProps}/>
</Provider>
这里match，RouterContext都是react-router为了服务器渲染准备的函数。
服务器端如何打包静态资源
这个没什么经验。
大家可以看看这篇文章http://www.jianshu.com/p/0ecd727107bb。 我的这篇文章主要是根据ChikaraChan的文章写的学习笔记。
ChikaraChan为服务器端渲染写了一个脚手架。除了我刚刚提到的几个问题，他还考虑开发项目的其他很多问题。
参考文章
网友评论