实现ssr服务端渲染的方法步骤

前言

前段时间寻思做个个人网站，然后就立马行动了。  个人网站如何实现选择什么技术方案，自己可以自由决定。  刚好之前有大致想过服务端渲染，加载速度快，还有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文件配置。