前段时间寻思做个个人网站，然后就立马行动了。 个人网站如何实现选择什么技术方案，自己可以自由决定。 刚好之前有大致想过服务端渲染，加载速度快，还有seo挺适合个人网站的。 所以就自己造了个轮子用koa+react来实现ssr服务端渲染。
什么是ssr
最初听说有单页面的服务端渲染的时候，就理解为类似传统的服务端路由+模板渲染，只是需要用单页面应用的框架写。后面寻思这样好像有点傻，再一了解，原来只是在首次加载的时候，后端进行当前路径页面的组件渲染和数据请求，组装成html返回给前端，用户就能很快看到看到页面，当html中的js资源加载完成后，剩下执行和运行的就是一般的单页面应用。 所以ssr是后端模板渲染和单页面的组合。 ssr有两种模式，单页面和非单页面模式，第一种是后端首次渲染的单页面应用，第二种是完全使用后端路由的后端模版渲染模式。他们区别在于使用后端路由的程度。
优势
ssr的两个明显的优势：首次加载快和seo。 为什么说首次加载快呢。 一个普通的单页面应用，首次加载的时候需要把所有相关的静态资源加载完毕，然后核心js才会开始执行，这个过程就会消耗一定的时间，接着还会请求网络接口，最终才能完全渲染完成。
ssr模式下，后端拦截到路由，找到对应组件，准备渲染组件，所有的js资源在本地，排除了js资源的网络加载时间，接着只需要对当前路由的组件进行渲染，而页面的ajax请求，可能在同一台服务器上，如果是的话速度也会快很多。最后后端把渲染好的页面反回给前端。 注意：页面能很快的展示出来，但是由于当前返回的只是单纯展示的dom、css，其中的js相关的事件等在客户端其实并没有绑定，所以最终还是需要js加载完以后，对当前的页面再进行一次渲染，称为同构。 所以ssr就是更快的先展示出页面的内容，先让用户能够看到。 为什么seo友好呢，因为搜索引擎爬虫在爬取页面信息的时候，会发送HTTP请求来获取网页内容，而我们服务端渲染首次的数据是后端返回的，返回的时候已经是渲染好了title，内容等信息，便于爬虫抓取内容。
如何实现
大致对ssr有了一个了解，我们现在需要对实现整理一下大致实现思路和流程。
1.选择一个单页面框架（我目前选择的是react）
2.选择node服务端框架（我目前选择的是koa2）
3.实现核心逻辑，让node服务端能够路由和渲染单页面组件（这一点分为很多小实现点，后面说）
4.优化开发和发布环境自动化构建工具（webpack）
开始实现之前创建一个react-ssr项目，项目下创建client和server目录用于写客户端和服务端代码，webpack目录用于weppack文件配置。
1.react应用
安装react依赖，在client中创建好一个基础的react文件夹结构，并写好一个可以运行的有路由配置的应用，client文件目录如下：
2.server应用
安装koa和相关依赖，在server中创建好一个基础的服务端文件夹结构，并写好一个简单的可运行的后端应用服务。server文件夹如下：
3.核心实现
因为有仓库代码就不对基础代码做解释，现在我们有一个可以单独运行的react单页面应用和一个后端应用，他们都有各自的路由。接下来我们做改造，实现ssr的单页面模式（非单页面模式仅仅是做部分调整，因此这里只讲实现单页面模式）。
核心实现分为以下几步：
1） 后端拦截路由，根据路径找到需要渲染的react页面组件X
2）调用组件X初始化时需要请求的接口，同步获取到数据后，使用react的renderToString方法对组件进行渲染，使其渲染出节点字符串。
3）后端获取基础html文件，把渲染出的节点字符串插入到body之中，同时也可以操作其中的title，script等节点。返回完整的html给客户端。
4）客户端获取后端返回的html，展示并加载其中的js，最后完成react同构。
1）我们在客户端写react的时候，router常规的会定义一个数组，存放组件和对应的path，然后注册路由，如下：
上面说过，实现ssr就是实现单页面应用+首次服务端渲染，所以我们本身就是做的一个单页面应用。 现在实现了单页面应用，需要实现首次服务端渲染。 服务端的应用启动以后，接受到url请求，比如访问 :9999/ ,后端服务获取到当前的path为/，这个时候我们就希望后端找到配置path为‘/'的上图的Index组件，对其进行渲染。 我们在client的router文件夹中建立两个js文件index和pages：
pages 里配置路由路径和组件的映射，代码大致如下，使其能被客户端路由和服务端路由同时使用。
