React是目前前端社区最流行的UI库之一，它的基于组件化的开发方式极大地提升了前端开发体验，React通过拆分一个大的应用至一个个小的组件，来使得我们的代码更加的可被重用，以及获得更好的可维护性，等等还有其他很多的优点...
通过React, 我们通常会开发一个单页应用（SPA），单页应用在浏览器端会比传统的网页有更好的用户体验，浏览器一般会拿到一个body为空的html，然后加载script指定的js, 当所有js加载完毕后，开始执行js, 最后再渲染到dom中, 在这个过程中，一般用户只能等待，什么都做不了，如果用户在一个高速的网络中，高配置的设备中，以上先要加载所有的js然后再执行的过程可能不是什么大问题，但是有很多情况是我们的网速一般，设备也可能不是最好的，在这种情况下的单页应用可能对用户来说是个很差的用户体验，用户可能还没体验到浏览器端SPA的好处时，就已经离开网站了，这样的话你的网站做的再好也不会有太多的浏览量。
但是我们总不能回到以前的一个页面一个页面的传统开发吧，现代化的UI库都提供了服务端渲染(SSR)的功能，使得我们开发的SPA应用也能完美的运行在服务端，大大加快了首屏渲染的时间，这样的话用户既能更快的看到网页的内容，与此同时，浏览器同时加载需要的js，加载完后把所有的dom事件，及各种交互添加到页面中，最后还是以一个SPA的形式运行，这样的话我们既提升了首屏渲染的时间，又能获得SPA的客户端用户体验，对于SEO也是个必须的功能。
OK，我们大致了解了SSR的必要性，下面我们就可以在一个React App中来实现服务端渲染的功能，BTW, 既然我们已经处在一个到处是async/await的环境中，这里的服务端我们使用koa2来实现我们的服务端渲染。
初始化一个普通的单页应用SPA
首先我们先不管服务端渲染的东西，我们先创建一个基于React和React-Router的SPA，等我们把一个完整的SPA创建好后，再加入SSR的功能来最大化提升app的性能。
首先进入app入口 App.js:
import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Route } from 'react-router-dom'; const Home = () => <div>Home</div>; const Hello = () => <div>Hello</div>; const App = () => { return ( <Router> <Route exact path="https://www.jb51.net/" component={Home} /> <Route exact path="/hello" component={Hello} /> </Router> ) } ReactDOM.render(<App/>, document.getElementById('app'))
上面我们为路由/ 和 /hello创建了2个只是渲染一些文字到页面的组件。但当我们的项目变得越来越大，组件越来越多，最终我们打包出来的js可能会变得很大，甚至变得不可控，所以呢我们第一步需要优化的是代码拆分（code-splitting），幸运的是通过和 react-loadable，我们可以很容易做到这一点。
用React-Loadable来时间代码拆分
使用之前，先安装 react-loadable:
npm install react-loadable # or yarn add react-loadable
然后在你的 javascript中:
//... import Loadable from 'react-loadable'; //... const AsyncHello = Loadable({ loading: <div>loading...</div>, //把你的Hello组件写到单独的文件中 //然后使用webpack的 dynamic import loader: () => import('./Hello'), }) //然后在你的路由中使用loadable包装过的组件: <Route exact path="/hello" component={AsyncHello} />
很简单吧，我们只需要import react-loadable， 然后传一些option进去就行了，其中的loading选项是当动态加载Hello组件所需的js时，渲染loading组件，给用户一种加载中的感觉，体验也会比什么都不加好。
好了，现在如果我们访问首页的话，只有Home组件依赖的js才会被加载，然后点击某个链接进入hello页面的话，会先渲染loading组件，并同时异步加载hello组件依赖的js，加载完后，替换掉loading来渲染hello组件。通过基于路由拆分代码到不同的代码块，我们的SPA已经有了很大的优化，cheers🍻。更叼的是react-loadable同样支持SSR，所以你可以在任意地方使用react-loadable，不管是运行在前端还是服务端，要让react-loadable在服务端正常运行的话我们需要做一些额外的配置，本文后面会讲到，先不急🏃。
到这里我们已经创建好一个基本的React SPA，加上代码拆分，我们的app已经有了不错的性能，但是我们还可以更加极致的优化app的性能，下面我们通过增加SSR的功能来进一步提升加载速度，顺便解决一下SPA中的SEO问题🎉。
加入服务端渲染（SSR）功能
首先我们先搭建一个最简单的koa web服务器：
npm install koa koa-router
然后在koa的入口文件app.js中: