写在前面

Server Slide Rendering 服务端渲染,又简写为 SSR，他一般被用在我们的 SPA（Single-Page Application） 中，即单页应用。

为什么要用SSR？

首先我们需要知道 SSR 对于 SPA 的好处，优势是什么。

• 更好的 SEO（Search Engine Optimization），SEO 是搜索引擎优化，简而言之就是针对百度这些搜索引擎，可以让他们搜索到我们的应用。这里可能会有误区，就是我也可以在 index.html 上写 SEO ，为什么会不起作用。因为 React、Vue 的原理是客户端渲染，通过浏览器去加载 js、css，有一个时间上的延迟，而搜索引擎不会管你的延迟，他就觉得你如果没加载出来就是没有的，所以是搜不到的。
• 解决一开始的白屏渲染，上面讲了 React 的渲染原理，而SSR服务端渲染是通过服务端请求数据，因为服务端内网的请求快，性能好所以会更快的加载所有的文件，最后把下载渲染后的页面返回给客户端。

服务端渲染VS客户端渲染

客户端渲染路线：

1. 请求一个 html
2. 服务端返回一个 html
3. 浏览器下载 html 里面的 js/css 文件
4. 等待 js 文件下载完成
5. 等待 js 加载并初始化完成
6. js 代码终于可以运行，由js代码向后端请求数据( ajax/fetch )
7. 等待后端数据返回
8. react-dom ( 客户端 )从无到完整地，把数据渲染为响应页面

服务端渲染路线：

1. 请求一个 html
2. 服务端请求数据( 内网请求快 )
3. 服务器初始渲染（服务端性能好，较快）
4. 服务端返回已经有正确内容的页面
5. 客户端请求 js/css 文件
6. 等待 js 文件下载完成
7. 等待 js 加载并初始化完成
8. react-dom ( 客户端 )把剩下一部分渲染完成( 内容小，渲染快 )

从上面两者的渲染路线可以看到，其主要区别就在于，客户端从无到有的渲染，服务端是先在服务端渲染一部分，在再客户端渲染一小部分。

参考文章

React服务端渲染+pm2自动化部署