简单谈谈服务器渲染

作者: 橙子_80c3 | 来源:发表于2017-04-13 22:43 被阅读0次

简单谈谈服务器渲染
一个简单的服务器渲染(ssr)的例子
服务器渲染(SSR)
前后渲染
服务端渲染
渲染
React 实作笔记
Next.js 中使用Non-SSR组件
服务器渲染与客户端渲染
CORONA 渲染器学习笔记之三：特色

服务器端渲染主要有两个优势，一是加快首屏渲染时间，二是有利于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为了服务器渲染准备的函数。