React SSR

ReactDOMServer

参考链接：https://zh-hans.reactjs.org/docs/react-dom-server.html

ReactDOMServer 对象允许你将组件渲染成静态标记。通常，它被使用在 Node 服务端上

// ES modules
import * as ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');

---

React SSR 介绍

什么是客户端渲染

CSR：Client Side Rendering
服务器端仅返回JSON数据，Data和Html在客户端进行拼接。

什么是服务端渲染

SSR：Server Side Rendering
服务器端返回HTML，Data和Html在服务器端进行拼接。

客户端渲染存在的问题：

1. 首屏等待时间长，用户体验差
2. 页面结构为空，不利于SSO

客户端渲染首屏时间长的原因如下：
首先浏览器要求服务器端请求一个空的HTML，然后再去请求json数据，然后再进行HTML与json数据的组合，然后再渲染页面。而服务器渲染只需要浏览器去服务端请求一次带有内容的HTML，即可有完整的页面(虽然可能没有交互，因为还得请求js)

React SSR 同构

同构指的是代码复用，即实现客户端和服务器端最大程度的代码复用。

---

服务端渲染demo

1. 创建Node服务

2. 实现 React SSR

3. webpack 打包配置

问题：node环境不支持esmodule模块，不支持jsx语法

4. 客户端React添加事件

在服务端的React代码里添加事件是不生效的，因此需要在客户端进行二次渲染。

实现思路：在客户端对组件进行二次渲染，为组件元素添加事件。

总结：

SSR：

• CSR相较SSR首屏时间长的原因。
• 需要借助react-dom/server提供的renderToString()方法将React组件转换成字符串，方便服务端返回。
• 需要进行代码同构，同构指的是代码复用，即实现客户端和服务器端最大程度的代码复用。
• 服务端渲染对于事件不生效，需要借用ReactDom提供的hydrate在客户端进行二次渲染，hydrate方法在实现渲染的时候，会复用原本已经存在的DOM节点，减少重新生成节点以及删除原本DOM节点的开销。