如果是使用服务端渲染，是不需要js即可看到页面的，也就是时间是这里的login页面和css加载完就可以看到真正的页面。而如果是传统ajax方式，则是在22s多，两者有6倍左右的差距，如果再加上接口调用，我们之前测试过，用户看到首屏的的时间，有8-10倍左右的差距。

服务端渲染的首屏时间是：page+apirequest+css，page已经包含数据了。
客户端的首屏时间是：page+css+js+apirequest。

除了客户端需要加载一个很大的js文件外，API请求在服务端进行一般也是更快的。这里简单解释一下首屏的概念：非首页。从任何地方进来的那个页面都是首屏。也就是说，做isomorphic，首先要保证没有js的情况，可以直接从浏览器输入任何一个地址进行访问也是可访问的。和早期的服务端渲染是一样的。所以，这也是为什么SEO能更友好的原因。

三、服务端渲染技术详解

为什么要使用客户端与服务端复用代码的同构方式？维护性问题。客户端是不安全的，所以服务端不能信任客户端，需要做各种校验，包括拉取数据后的ui渲染，这样就需要前后端都要写一次一样逻辑的代码。为了开发效率、维护性等，所以需要复用。

这点上，nodejs有天然的优势。如果不考虑同构的话，光服务端渲染，其实很简单，react提供了一个方法：renderToString()。只要把它取得的数据塞到模版文件里就可以了，比如nodejs的ejs文件。为了代码复用，我们会考虑ui放服务端渲染，逻辑放服务端，API请求的代码也共用一套，路由最好也是只写一次。react router它就支持服务端路由，并且它也为服务端渲染提供了一些友好的API，比如Link。

接下来，我们就把具体的代码大概讲一下。首先是路由定义。

import{browserHistory}from'react-router'

import{RouterContext,createMemoryHistory,match}from'react-router'

我们把服务器端（nodejs)的路由配置全部贴出来，其实使用的是react-router提供的方法。

server.get('*',(req,res,next)=>{consthistory=createMemoryHistory()constroutes=createRoutes(history)letstore=configStore()match({routes,location:req.url},(err,redirectLocation,renderProps)=>{if(err){res.status(500).send(err.message)}elseif(!renderProps){res.status(404).send('pagenotfound')}else{getComponentFetch(renderProps,history,store).then(()=>{letreduxState=escape(JSON.stringify(store.getState()))lethtml=ReactDOM.renderToString(<Providerstore={store}>{<RouterContext{...renderProps}/>}</Provider>)res.render('home',{html,scriptSrcs,cssSrc,reduxState})}).catch((err)=>{next(err)})}})})functiongetComponentFetch(renderProps,store){let{query,params}=renderPropsletcomponent=renderProps.components[renderProps.components.length-1].WrappedComponentletpromise=component&&component.fetchData?component.fetchData({query,params,store,history}):Promise.resolve()returnpromise}

路由匹配所有请求，当访问时，根据路由配置，取得对应的react组件，因为要在服务端马上调用API接口获取数据，我们会在容器组件放一个静态方法：fetchData，调用这个方法来取得数据，然后放在一个变量传给ejs模版文件。当然，我们这时页面已经渲染出数据了。这个reduxState变量的数据是做为js加载完后渲染时使用。

我们看一下客户端的代码：

letreduxState={}if(window.__STATE__){try{reduxState=JSON.parse(unescape(__STATE__))}catch(e){}}conststore=configStore(reduxState)ReactDOM.render((<Providerstore={store}>{createRoutes(browserHistory)}</Provider>),document.getElementById('container-root'))

window.__STATE__这个就是我从服务端传过来的变量reduxState的值，用来初始化redux的store。

同时，如果为了避免首屏服务端请求一次数据，浏览器又再请求一次数据，我们可以把当前的container组件的displayName也从服务端传回浏览器端，这样在组件里判断有值，则不发起fetch请求，而是直接使用的是reduxstore的值。

fetchData的大概代码我也贴一下：

staticfetchData({store}){letcityId=global.currentCityIdreturnstore.dispatch(actions.getHomeData(cityId))}

写这个方法的目的也是为了复用redux的逻辑，不管是action还是store。这样，我们不需要掌握很多nodejs知识，只需要在server端配置一下路由，即可实现nodejs与浏览器端一套代码复用。包括UI、逻辑、redux、路由。后续只需要正常写组件，写数据请求、逻辑等即可。

四、同构方式的react代码编写一些需要注意的地方

最后，讲一下一些注意点。

1、在react的初次渲染的周期(constructor\componentWillMount\render)，不要写浏览器相关对象的代码，比如window。另外：要注意componentDidMount是在浏览器端执行，在node端并不会执行。也不要在上面的几个生命周期写setState。

2、用户首屏渲染后，在没有加载js的情况下，有可能马上进行操作，比如链接跳转或者表单提交，所以要假设没有JS的情况也可以正常访问。比如，表单提交使用form，链接使用href（reactrouter的link）而不是onClick。这里，react router的Link,当你js加载完后会自动把链接变成hash的形式。同时js加载完成后，就可以把表单事件或者链接转给js来处理了，后续的页面就全部走ajax的方式跳转。补充一下同构方式的渲染流程：用户发起请求—>服务端接收到请求—> 匹配路由—>拉数据—>渲染界面—>拉JS代码—>匹配浏览器路由—>走路由对应的组件的生命周期—>拉数据——>更新组件。所以，当js都down下来后，这时你的onClick事件才是真正可以生效的。

3、浏览器要访问API地址，这个涉及到多个环境，我这里为了方便，是在我的node做代理中转API请求的，这样，浏览器端的请求的API地址只要是http://localhost就可以。nodejs端根据不同的环境取不同的API接口配置，而且这样做有额外的好处，可以绕过跨域，API后端服务不需要去配跨域这么麻烦，浏览器的请求也可以少一个option去校验是否允许跨域访问。

react同构，差不多就这些东西了。

以下问题是来自51CTO开发者社群小伙伴们的提问和分享

Q：Java-workman-北京：如果只用react+ajax的情况效率会有变化吗？不是一个新的应用，只是在原有基础上使用react的dom去展示，和普通的ajax会有太大的出处吗？

A：百安居-陈老师：这个效率就是之前说的，你要数据出来，必须得等你的JS文件下载完，然后发起请求，所以肯定会比较慢。

Q：前端-Jouryjc-深圳：老师麻烦贴一下项目github。

A：百安居-陈老师：我自己有弄了一个startkit，并没传到github。

Q：数据-unicorn-北京：ant.design是目前最好的react框架吗？

A：百安居-陈老师：ant.design不是react框架。只是UI。

Q：前端-秋香姐-深圳：node做代理中转API请求这个是怎么做的啊？这个http-proxy是在服务端做的还是在客户的做的啊？

A：百安居-陈老师：用http-proxy。在nodejs端。

importhttpProxyfrom'http-proxy'constproxy=httpProxy.createProxyServer({target:`${targetUrl}/api`})server.use('/api',res)=>{proxy.web(req,res)})

Q：前端-秋香姐-深圳：staticfetchData方法是啥时候怎么调用的呀？

A：百安居-陈老师：