摘要

文章回顾了 React 渲染技术从 CSR、SSR、SSG 到混合渲染的演进过程，分析了各阶段技术的特点、优缺点、工作流程，阐述了 Next.js 的渲染策略，体现了 React 团队在创新与性能追求方面的贡献。

摘要

文章回顾了 React 渲染技术从 CSR、SSR、SSG 到混合渲染的演进过程，分析了各阶段技术的特点、优缺点、工作流程，阐述了 Next.js 的渲染策略，体现了 React 团队在创新与性能追求方面的贡献。

一、React 渲染技术的起源

最初的 Web 页面是纯静态 HTML 文件，随后经历了动态 HTML 阶段（如使用 PHP、JSP、ASP 在服务端生成 HTML 内容）和 AJAX 阶段。随着 JavaScript 框架兴起，客户端渲染（CSR）成为主流，它是前端主导的渲染模式，工作流程为：客户端请求网页，服务器发送基本 HTML 文件，浏览器下载执行 JavaScript 文件，React 在浏览器中运行创建 DOM 元素插入页面，如需数据则发起 API 请求更新 DOM。CSR 有更好的用户交互体验、减少服务器负载、实现前后端分离等优势，但存在初始加载时间长、SEO 受影响、低性能设备表现不佳等局限。

二、服务器端渲染（SSR）的发展

由于 CSR 的局限，前端又发展出 SSR。现代 SSR 工作流程为：用户请求页面时，服务器执行 JavaScript 代码生成完整 HTML 内容发送给浏览器，同时发送必要 JavaScript 代码，浏览器加载后应用在客户端 hydration。以 React 为例，服务器使用ReactDOMServer.renderToString()渲染 App 组件生成静态 HTML，客户端接收显示后加载 React 代码，ReactDOM.hydrate()被调用进行 hydrate 过程。SSR 虽解决了部分 SEO 问题，但增加服务器负载、提高开发复杂性、存在状态同步问题。

三、静态站点生成（SSG）的诞生

SSG 是在构建时生成完整静态 HTML 页面的技术，它会遍历页面和路由，获取数据生成 HTML 页面并保存部署。Next.js 的 SSG 示例展示了其获取数据和生成页面的方式。SSG 平衡了 CSR 和 SSR 的劣势，但场景有限，不适合频繁更新的动态内容、构建时间可能较长且无法处理用户特定动态内容。

四、混合渲染阶段

（一）React 的相关技术基础

1. Fiber 架构演进

在 Fiber 架构之前，React 渲染是递归过程，存在性能问题且无法中断。React 16 版本引入 Fiber 架构，支持增量渲染、优先级管理、错误处理和并发模式，其渲染过程分为 Reconciliation 阶段（可中断，执行生命周期方法、计算差异等工作）和 Commit 阶段（不可中断，执行实际 DOM 更新），带来了更好的性能、更高灵活性、改善用户体验和更强大错误处理等优势。

2. React Suspense

Suspense 是 React 16.6 引入的特性，最早配合 lazy 解决代码分割问题。它允许组件在渲染前“等待”操作，背后原理是组件抛出 Promise，Suspense 组件捕获并渲染 fallback 内容，Promise resolve 后重新渲染。在 React 18 版本功能得到扩展增强，可在服务器端用于组件异步渲染。

3. 流式渲染（Streaming Rendering）

React 16.0 支持 Streaming SSR，引入ReactDOMServer.renderToNodeStream()方法将 React 元素树转换为 Node.js Readable Stream。React 18 增强了流式 API，如renderToPipeableStream()，并成熟支持 Suspense。示例展示了如何使用这些特性实现流式 SSR。

（二）React Server Components (RSC)

RSC 是混合渲染模式的基座，可根据组件维度进行服务端渲染，数据获取和渲染都在服务端，能减小客户端代码体积。服务器渲染 RSC 树并将结果序列化为特殊格式，客户端拿到后动态 hydrate。RSC 是无状态的，不能使用 hooks 或保持内部状态等。它能借助 Suspense 开启 CSR 和 SSR 的混合渲染。同时介绍了令人迷惑的“use client”和“use server”指令，“use client”标记的组件并非纯客户端组件，在 Nextjs 等框架中仍有服务器端运行的情况，“use server”是用来标注 Server Action 的。

（三）Next.js 的渲染策略

1. 整体渲染策略

Nextjs 不是服务端渲染优先，而是构建渲染优先（SSG 优先），通过示例展示了在不同代码情况下的渲染结果。其缓存策略包括 Router Cache、Request Memorize 和 Data Cache 等多层。

2. ISR 策略

ISR 是混合了 SSG 和 SSR 的模式，通过 fetch 函数的 revalidate 参数控制缓存失效重新请求，构建时生成静态页面，根据页面是否过期有不同的请求处理流程。

3. PPR 策略

PPR 支持局部渲染静态和动态组件，构建时生成页面静态部分并为动态内容预留位置，用户请求时发送静态部分并在服务器端准备动态内容，准备好后流式传输填充到客户端。

五、总结

本文梳理了 React 渲染技术从 CSR 到多种技术的演进历程，分析了各阶段技术特点、优缺点等，阐述了 Next.js 的渲染策略，体现了 React 团队的贡献，对前端开发者在技术选型和构建高性能 Web 应用方面有启发意义。