面试题答案
一键面试React Server Components工作原理
- 服务器端渲染组件
- 拆分组件树：React Server Components将组件树拆分为服务器部分和客户端部分。服务器组件在服务器上执行，无需在客户端下载和执行完整的JavaScript代码。例如，数据获取逻辑可放在服务器组件中，像从数据库读取大量文章列表数据。
- 数据流优化：服务器组件能直接访问服务器资源，高效获取数据。以电商应用为例，产品列表组件可在服务器端查询数据库获取产品信息，再传递给客户端组件。这减少了不必要的数据传输，因为只有最终渲染所需的数据会被发送到客户端。
- 渲染为流：服务器组件渲染时会将结果以流的形式发送到客户端。这意味着客户端能更快开始显示内容，而不用等待整个页面渲染完成。比如加载长文章页面，文本内容可先以流的形式到达客户端并展示，图片等资源后续再加载。
- 与客户端渲染的交互方式
- 水合（Hydration）：当服务器渲染的结果到达客户端，客户端React会将其与客户端JavaScript代码进行“水合”。简单来说，就是为服务器渲染的静态HTML元素添加交互功能。例如，服务器渲染了一个按钮，客户端代码会为这个按钮添加点击事件处理逻辑。
- 客户端激活（Client Activation）：客户端组件只有在需要交互时才会被激活并下载相应的JavaScript代码。例如一个折叠面板组件，初始状态下它由服务器渲染展示为折叠状态，当用户点击展开按钮时，客户端代码才会被下载并激活，实现展开动画等交互功能。这避免了在初始加载时下载大量不必要的JavaScript代码，提升了应用的加载性能。