水合、客户端组件、服务端组件
React 服务端渲染相关函数 renderToString 是 react-dom/server 提供的服务端渲染方式；renderToString, renderToStaticMarkup, renderToNodeStream, renderToStaticNodeStream 四个方法能够将 react 组件渲染成静态的 html 标签，前两者能在客户端和服务端运行，后两者只能在服务端运行 水合 SSR 服务端渲染，会将整个组件渲染为HTML，但是HTML是没有交互性的。而客户端在渲染HTML之后，还需要等待JS下载完毕并且执行，由JS来赋予HTML交互性，那么这个阶段就叫做水合。水合过后，内容就会变为可交互性。 SSR 的缺陷
- SSR渲染，数据的获取必须在组件渲染之前。
- 组件的JS文件在客户端全部下载完，才能开始水合。
- 所有组件都必须水合完毕，组件之间才能够进行交互。 服务端渲染需要水合、服务端组件流式水合 客户端组件和服务端组件的区别 客户端组件可以使用浏览器 API，组件具有交互性，如 onClick 时间，可以使用 useEffect；客户端需要使用 'use client' 标识； 服务端组件在服务端渲染，数据在服务端获取，然后生成 HTML 发送到客户端，发送的过程使用 streaming 方式，然后再水合 客户端不能引用服务端组件；服务端组件可以引用客户端组件，但是会被看做客户端组件 服务端组件会流式输出一种类JSON的数据结构，由前端的 React相关插件解析 服务端组件后缀 .server.js ; 客户端 .client.js SSR和RSC服务端组件的区别 RSC：重点在Components，即组件。在组件中直接获取数据，然后流式输出类JSON数据结构到客户端渲染。组件依赖的代码并不会打包到bundle中。并且只有在客户端请求相关组件的时候才会返回。 SSR：重点在Rendering，即渲染。在服务端将组件渲染成HTML发送给客户端，因此SSR需要将组件的所有依赖都打包到bundle中。 Suspense以及Streaming的实现确实能优化我们的页面渲染，将原本只能先获取数据、再渲染水合的传统 SSR 改为渐进式渲染水合 。 但是流式渲染对于用户需要下载的JS代码量依旧是没有减少。因此使用RSC，服务端组件，就能将不必要的代码隐藏到服务器当中。 直接访问服务器端资源 增强安全性 支持缓存数据
来源整理自：vue3js.cn 面试官系列
