服务器渲染的网站,简单谈谈服务器渲染

服务器端渲染主要有两个优势，一是加快首屏渲染时间，二是有利于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(

)

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 = (

)

随后在客户端与服务器端：

//客户端

{routes}

//服务器

match({routes, location: ctx.url}, (error, redirectLocation, renderProps) => {

_renderProps = renderProps

});

这里match，RouterContext都是react-router为了服务器渲染准备的函数。

服务器端如何打包静态资源

这个没什么经验。

大家可以看看这篇文章http://www.jianshu.com/p/0ecd727107bb。 我的这篇文章主要是根据ChikaraChan的文章写的学习笔记。

ChikaraChan为服务器端渲染写了一个脚手架。除了我刚刚提到的几个问题，他还考虑开发项目的其他很多问题。

参考文章