React Academy · 课时

React SSR 的底层工作原理

Q: 「React SSR 的底层工作原理」这节课中我会学到什么？

跟踪 renderToString/renderToPipeableStream 流程，以及客户端如何接管水合。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

跟踪 renderToString/renderToPipeableStream 流程，以及客户端如何接管水合。

React SSR 的底层工作原理 是 CoddyKit 上的免费 React Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

SSR 解决的问题

客户端 React 需要 JavaScript 才能进行渲染。在 JS 加载并运行之前，用户只能看到空白页面。SSR 会在服务器上预先渲染 HTML，让用户立即看到内容，从而改善感知性能和搜索引擎优化效果。

renderToString

最初的 SSR API：renderToString(<App />) 会在服务器上同步将组件树渲染为 HTML 字符串。

import { renderToString } from 'react-dom/server';
import App from './App';

// In an Express handler:
app.get('*', (req, res) => {
  const html = renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html><body>
      <div id="root">${html}</div>
      <script src="/bundle.js"></script>
    </body></html>
  `);
});

客户端水合

HTML 到达后，浏览器会解析它并渲染用户界面。随后，React 的 hydrateRoot() 会附加事件监听器，使静态 HTML 变得可交互，这个过程称为水合。

// client/index.tsx
import { hydrateRoot } from 'react-dom/client';
import App from './App';

hydrateRoot(document.getElementById('root'), <App />);

水合期间发生了什么

React 会同时遍历服务器渲染的 DOM 和虚拟 DOM。如果两者匹配，React 会在不修改 DOM 的情况下附加监听器。如果两者不同，React 会记录水合警告并修正 DOM。

renderToPipeableStream

React 18 的流式接口会在数据可用时分块发送 HTML，使浏览器能够逐步绘制内容，即使服务器仍在处理请求。

import { renderToPipeableStream } from 'react-dom/server';

app.get('*', (req, res) => {
  const { pipe } = renderToPipeableStream(<App />, {
    bootstrapScripts: ['/bundle.js'],
    onShellReady() {
      res.setHeader('content-type', 'text/html');
      pipe(res); // starts streaming
    },
  });
});

Suspense 与流式渲染

使用流式 SSR 时，Suspense 边界会先流式传输回退内容，数据解析后再将其替换为实际内容，而不会阻塞初始 HTML 刷新。

// The shell (nav, layout) streams immediately;
// <UserProfile> suspends and streams when data resolves
function App() {
  return (
    <Layout>
      <Suspense fallback={<Skeleton />}>
        <UserProfile /> {/* streams after data loads */}
      </Suspense>
    </Layout>
  );
}

数据序列化

在服务器上获取的数据必须经过序列化并嵌入 HTML，这样客户端就能在水合期间读取这些数据，而无需再次获取。

// Server:
const data = await fetchData();
const html = renderToString(<App data={data} />);
const serialized = JSON.stringify(data).replace(/</g, '\\u003c');

// Inline data in HTML:
`<script>window.__INITIAL_DATA__ = ${serialized};</script>`

// Client hydration reads:
const data = window.__INITIAL_DATA__;

环境差异

服务器代码运行在 Node.js 中，而不是浏览器中。在服务器上引用 window、document 或 localStorage 会导致崩溃。请使用 typeof window !== 'undefined' 进行保护。

const isBrowser = typeof window !== 'undefined';

function getTheme() {
  if (!isBrowser) return 'light'; // server-safe default
  return localStorage.getItem('theme') ?? 'light';
}

React Server Components 与 SSR

SSR 会在每次请求时将组件渲染为 HTML。React Server Components（RSC）则不同：它们不会将自身的 JS 发送到客户端，并且可以是异步的，但 RSC 需要支持 RSC 协议的打包工具（Next.js 等）。

流式渲染的性能优势

流式 SSR 可以改善外壳的首字节时间（TTFB），并支持选择性水合：即使整页 HTML 尚未完成流式传输，浏览器也能先对交互式局部区域进行水合。

快速检查

当服务器 HTML 已经存在时，React 的 hydrateRoot() 与 createRoot() 的作用有何不同？

回顾

SSR 使用 renderToPipeableStream 在 JS 加载前发送 HTML。客户端调用 hydrateRoot()，将事件监听器附加到服务器生成的 HTML 上。结合 Suspense 的流式 SSR 会先发送外壳，再异步填充内容。使用 typeof window !== 'undefined' 保护浏览器 API。

常见问题解答

「React SSR 的底层工作原理」课时是免费的吗？

是的 — 「React SSR 的底层工作原理」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「React SSR 的底层工作原理」这节课中我会学到什么？

跟踪 renderToString/renderToPipeableStream 流程，以及客户端如何接管水合。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「React SSR 的底层工作原理」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy