服务端渲染与 Hydration 性能优化：流式渲染、部分 Hydration 与 Islands 架构技术背景SSR 能显著降低首屏白屏时间，但 Hydration 阶段的脚本执行与绑定可能造成主线程阻塞。React 18 的流式渲染与部分 Hydration（Islands 架构）可将首字节与交互就绪时间进一步优化，在复杂页面中尤为关键。核心内容React 18 流式 SSR（Node/Express）import express from 'express';
import { renderToPipeableStream } from 'react-dom/server';
import React from 'react';
const app = express();
app.get('/', (req, res) => {
let didError = false;
const { pipe } = renderToPipeableStream(
React.createElement('div', null, React.createElement('h1', null, 'Hello SSR Streaming')),
{
onShellReady() {
res.setHeader('Content-Type', 'text/html; charset=utf-8');
res.write('<!doctype html><html><head><title>SSR</title></head><body>');
pipe(res);
},
onAllReady() {
res.write(`<script src="/client.bundle.js" defer></script>`);
res.write('</body></html>');
res.end();
},
onError(err: any) { didError = true; console.error(err); }
}
);
});
app.listen(3000);
部分 Hydration 与 Islands 脚本挂载<div data-island="Nav"></div>
<div data-island="Hero"></div>
<div data-island="Cart"></div>
<script type="module">
const islands = {
Nav: () => import('/islands/Nav.js'),
Hero: () => import('/islands/Hero.js'),
Cart: () => import('/islands/Cart.js')
};
const nodes = document.querySelectorAll('[data-island]');
for (const node of nodes) {
const name = node.getAttribute('data-island');
const loader = islands[name as keyof typeof islands];
if (loader) loader().then(mod => mod.mount(node));
}
</script>
优先级与脚本拆分<link rel="modulepreload" href="/islands/Nav.js">
<script type="module" src="/critical.js" defer></script>
<script type="module" src="/noncritical.js" async></script>
技术验证参数在 React 18（Node 18，Chrome 128/Edge 130）下：首字节 TTFB：传统 SSR 280–420ms → 流式 140–260ms（P95）首屏可见：提升 20–35%Hydration 阶段阻塞：主线程长任务 P95 降至 < 50msIslands 挂载覆盖率：核心交互模块 ≥ 90%应用场景电商首页与营销活动页的快速首屏与分模块交互大型门户与资讯站的渐进就绪边缘节点就近渲染与流式下发最佳实践采用流式 SSR 提前输出壳层与关键内容按岛屿拆分交互脚本，延迟非关键模块挂载配合 `modulepreload` 与优先级控制，减少关键渲染阻塞持续监控 TTFB/LCP 与长任务占比，迭代调优
发表评论 取消回复