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在服务器端进行拼接。

前端SSH实现本质：比如next.js这些框架

在前端实现服务端渲染（SSR）时，客户端浏览器会发送请求到服务器获取数据，通常是通过 RESTful API 返回 JSON 数据。然后在前端的服务器环境中（通常使用Node.js），会将这些获取到的数据和页面模板结合起来生成完整的 HTML 页面，然后将这个完整的 HTML 页面发送给客户端浏览器。

这种方式可以让前端应用程序在服务器端动态生成页面内容，以提高首屏加载性能、搜索引擎优化以及用户体验。通过在前端实现服务端渲染，可以结合前端框架提供的渲染函数，将数据和页面模板结合起来生成完整的 HTML 页面，从而实现更快速的内容展示和更好的 SEO 效果。

服务端渲染（SSR）VS 客户端渲染（CSR）

各有其优势和适用场景，没有绝对的好坏之分，取决于具体的需求和情况：

服务端渲染（SSR）适用于：

1. SEO优化：对于需要在搜索引擎中有良好排名的网站，SSR 可以提供完整的页面内容，有利于搜索引擎抓取。
2. 首屏加载性能：对于追求快速首屏加载的网站，SSR 可以提供快速呈现内容，提高用户体验。
3. 内容静态化：对于内容不频繁变化的页面，可以使用 SSR 静态化生成页面，减轻服务器压力。

客户端渲染（CSR）适用于：

1. 交互性强：对于需要大量交互和动态更新的页面，CSR 可以提供更灵活的前端交互体验。
2. SPA应用：对于单页应用（SPA）或需要动态加载内容的应用，CSR 可以更好地管理应用状态。
3. 开发速度：对于开发速度优先的项目，CSR 可以减少服务器端渲染的复杂性，快速搭建应用。

综合考虑，根据项目需求和优先级来选择合适的渲染方式。有时候也可以结合两者，采用“混合渲染”（Hybrid Rendering）的方式，根据页面特点选择不同的渲染方式。

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节点的开销。