SSR

类似于传统后端渲染技术的回归，这个技术非常适合用来做网站，适合大型网站，方便SEO。

什么是服务器端渲染(SSR)？

服务器端渲染指的是，页面上的内容在服务器上就已经生成好了，服务器把内容给到浏览器，浏览器直接将内容显示在页面上就可以了。

只有第一次进入第一个页面的时候，由服务器端渲染，后面的页面全部由客户端渲染。

什么是客户端渲染(CSR)？

页面由JS渲染，JS运行在客户端，所以叫客户端渲染。

SSR比CSR好在哪里？

有两个最大的好处： 1.首屏加载速度。 2.SEO

用户加载页面的时候，对于SSR，浏览器下载HTML文档完毕就可以显示。对于CSR，浏览器下载HTML -> 下载JS文件 -> 运行React代码 -> 渲染页面。

SSR和CSR的渲染流程

客户端渲染流程：浏览器发送请求 -> 服务器返回HTML -> 浏览器发送js请求 -> 服务器返回js -> 浏览器执行js中的React代码

服务器端渲染流程：浏览器发送请求 -> 服务器运行React代码生成页面 -> 服务器返回页面

性能对比

服务器端渲染，React代码运行在服务器上，消耗服务器的性能。 客户端渲染，React代码运行在客户端上，消耗用户浏览器的性能。

node.js下使用common.js语法

require和module.exports

配置了webpack之后，就可以使用ES6模块方法。

在服务器端配置webpack

module.export = {
    target: 'node'  // 告诉webpack打包的是服务器端的文件
}

利用nodemon实现服务器自动重启更新页面

实现服务器端组件渲染

需要使用React-dom/server下的renderToString方法。

建立在虚拟DOM上的服务器端渲染

什么是同构？

一套React代码，在服务器端执行一次，到客户端再执行一次。 服务器端执行渲染页面，客户端执行可以解决点击事件无效的问题。

访问静态资源的中间件

app.use(express.static('public'));

客户端执行

给客户端单独配置一份webpack

渲染需要使用ReactDom.hydrate()方法

同构流程

1. 服务器端运行React代码渲染出HTML
2. 发送HTML给浏览器
3. 浏览器接受到内容展示
4. 浏览器加载JS文件
5. JS中的React代码在浏览器中重新执行
6. JS中的React代码接管页面操作

路由

需要在客户端和服务器端都运行一遍。服务器端需要使用StaticRouter。

服务器端渲染只发生一次

首次访问之后，React将全部接管，后面切换路由，服务器端不会再渲染。

中间层是什么？

属于项目架构的一部分。node服务器就是中间层，从Java服务器获取数据，拼接好页面发送给客户端。

这样做分工明确，对性能也有好处。

客户端 -> node服务器 -> java服务器。

loadData方法及路由重构

拿到异步数据，填充到store中。 react-router-dom官网提供了方法和实例。server-rendering。

数据的注水和脱水

注水：服务器端将请求到的数据，添加到window全局对象下。 脱水：客户端渲染的时候，从window下取出数据，设置为store的默认数据。

node服务器作为数据请求的中间层

客户端请求数据：客户端向node服务器发送请求，node服务器再代理到java服务器。 node端请求数据：node端直接向java服务器发送请求。