react ssr 1

更新时间: 4/19/2025字数: 0 字

SSR:服务器返回页面的 html 字符串，然后让浏览器显示

CSR:服务器返回 html 文档，不包含页面的 html 内容，html 内容由返回的 html 文档的 js 脚本去动态渲染

CSR 和 SSR 最大的区别在于前者的页面渲染是 JS 负责进行的，而后者是服务器端直接返回 HTML 让浏览器直接渲染。

同构渲染

使用import { renderToString } from 'react-dom/server'的 renderToString 方法的 html，只是一段纯文本 html，是没有事件绑定的。

想要实现事件绑定，得靠浏览器去添加，这时就需要使用到同构渲染。服务端渲染来生成页面结构，客户端渲染来绑定事件。

通俗来讲： React 代码在服务器上运行一遍生成 html，返回给浏览器后，浏览器又运行 React 代码一遍给 html 一些元素添加事件绑定。

浏览器端的事件绑定方法：让浏览器执行 js 代码，怎么返回给浏览器呢？

返回给前端可以在服务器端生成的 html 中，body 标签内插入一段

<script src="/main.js"></script>

main.js 这段代码是什么？应该怎么生成的？

问题？

1. 为什么服务端加载了一次，客户端还需要再次加载呢？

因为服务端使用 renderToString 生成 html，并没有做事件相关的处理，因此返回给浏览器的内容不会有事件绑定，渲染出来的页面只是一个静态的 HTML 页面。

只有在客户端渲染 React 组件并初始化 React 实例后，才能更新组件的 state 和 props ，初始化 React 的事件系统，让 React 组件（页面）有交互。

2. 服务端加载了 React 输出的代码片段，客户端又执行了一次，这样是不是会加载两次导致资源浪费呢？

服务端渲染标记的节点上调用 ReactDOM.hydrate() 方法， React 将会保留该节点且只进行事件处理绑定。

3. 同构项目中当在浏览器中输入 URL 后，浏览器是如何找到对应的界面？
4. 浏览器收到 URL 地址例如： http://localhost:3000/list ；
5. 后台路由找到对应的 React 组件传入到 renderToString 中，然后拼接 HTML 输出页面；
6. 浏览器加载打包后的 JS 文件，并解析执行前端路由，输出相应的前端组件，发现是服务端渲染，因此只做事件绑定处理，不进行重复渲染，此时前端路由路由开始接管界面，之后跳转界面与服务端渲染无关。