文章目录 一、水合的基本概念 二、水合的工作原理 （一）水合过程详解 （二）水合的关键步骤代码示例 三、水合的详细实现 （一）完整的水合流程示例 （二）状态传递……
文
章
目
录
- 一、水合的基本概念
- 二、水合的工作原理
- （一）水合过程详解
- （二）水合的关键步骤代码示例
- 三、水合的详细实现
- （一）完整的水合流程示例
- （二）状态传递与水合
- 四、水合的挑战与解决方案
- （一）不匹配问题
- （二）使用useEffect处理仅客户端的逻辑
- （三）使用动态导入避免服务器端执行
- 五、高级水合技术
- （一）选择性水合
- （二）渐进式水合
- （三）流式SSR与水合
- 六、水合性能优化
- （一）减少水合不匹配
- （二）延迟非关键水合
- 七、调试水合问题
- （一）检测水合不匹配
- （二）使用React DevTools调试
- 服务器渲染：服务器利用
renderToString或renderToStaticMarkup方法，把React组件渲染成HTML字符串。这一步就像是建筑师按照设计图纸，先把房子的大致框架搭建好。 - HTML传输：服务器将生成的HTML发送到浏览器，就像把建好的房子框架运输到指定地点。
- 初始渲染：浏览器接收到HTML后进行显示，此时用户能够看到页面的内容，但还不能进行交互操作，这就好比房子框架搭好了，人可以进去看看，但还没有通电通水，无法正常生活。
- JavaScript加载：客户端的JavaScript包开始下载并执行，为后续的交互功能做准备，这一步类似于在房子里安装各种设备和线路。
- 水合过程：React把事件监听器添加到已有的DOM节点上，让静态的HTML变得可交互，这就相当于给房子通上水电，安装好各种电器，使其具备生活功能。
- 接管应用：水合完成后，React全面接管应用，之后的更新就按照正常的React渲染周期来进行，就像房子装修好后，居民可以正常生活，日常的维护和改造按照既定的规则进行。
React服务端渲染（SSR）的技术里，水合（Hydration）这个概念估计很多朋友都感觉有点陌生。接下来，本文将从它的基本概念入手，逐步深入探讨其工作原理、实现方式、面临的挑战及应对策略，还有相关的高级技术和性能优化方法等内容。
一、水合的基本概念
水合（Hydration）在React SSR中，指的是客户端JavaScript接管服务器渲染生成的HTML的过程。打个比方，服务器渲染生成的HTML就像是搭建好的毛坯房，而水合则是为这个毛坯房添加各种设施和装饰，让它变得可以正常居住和使用，也就是让静态的HTML具备交互性，同时还保留服务器渲染的内容。
这里对比一下水合与客户端渲染（CSR）。客户端渲染是从一个空的HTML容器开始，完全依靠JavaScript去构建整个DOM结构，就好比是在一片空地上从头开始盖房子；而水合则是在服务器已经搭建好基本框架（服务器渲染的HTML）的基础上，由JavaScript来添加事件监听器，让现有的DOM能够响应各种交互操作，类似在毛坯房的基础上进行装修和完善。
二、水合的工作原理
（一）水合过程详解
（二）水合的关键步骤代码示例
// 服务器端渲染
import { renderToString } from \'react-dom/server\';
// 将React组件渲染为HTML字符串
const appHtml = renderToString(<App />);
// 将HTML注入到模板中
const html = `
<!DOCTYPE html>
<html>
<head><title>React SSR应用</title></head>
<body>
<div id=\"root\">${appHtml}</div>
<script src=\"/client.js\"></script>
</body>
</html>
`;
// 发送到客户端
res.send(html);
这段服务器端代码先通过renderToString把App组件渲染成HTML字符串appHtml，然后将其嵌入到HTML模板中，最后发送给客户端。
// 客户端水合
import { hydrateRoot } from \'react-dom/client\';
// 水合应用
hydrateRoot(
document.getElementById(\'root\'),
<App />
);
在客户端，通过hydrateRoot方法，将App组件与服务器渲染的、已经存在于页面上的id为root的DOM元素进行水合操作，让页面具备交互性。
三、水合的详细实现
（一）完整的水合流程示例
// server.js - 服务器端代码
import express from \'express\';
import { renderToString } from \'react-dom/server\';
import { StaticRouter } from \'react-router-dom/server\';
import App from \'./src/App\';
const app = express();
app.get(\'*\', (req, res) => {
// 渲染应用为HTML
const appHtml = renderToString(
<StaticRouter location={req.url}>
<App />
</StaticRouter>
);
// 发送HTML到客户端
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>React SSR应用</title>
<meta charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
</head>
<body>
<div id=\"root\">${appHtml}</div>
<script src=\"/client.js\"></script>
</body>
</html>
`);
});
app.listen(3000, () => {
console.log(\'服务器运行在 http://localhost:3000\');
});
在这个服务器端代码中，借助express框架搭建服务器，通过renderToString和StaticRouter将App组件根据不同的请求路径渲染成HTML，再发送给客户端。
// client.js - 客户端入口
import { hydrateRoot } from \'react-dom/client\';
import { BrowserRouter } from \'react-router-dom\';
import App from \'./src/App\';
// 水合应用
hydrateRoot(
document.getElementById(\'root\'),
<BrowserRouter>
<App />
</BrowserRouter>
);
客户端代码则使用hydrateRoot和BrowserRouter，将App组件与服务器渲染的DOM进行水合，实现页面的交互功能。
（二）状态传递与水合
在SSR中，常常需要把服务器端的状态传递到客户端，这样在水合时就能恢复相同的状态。
// server.js - 服务器端状态准备
app.get(\'*\', async (req, res) => {
// 获取初始数据
const initialData = await fetchInitialData(req.path);
// 渲染应用为HTML
const appHtml = renderToString(
<StaticRouter location={req.url}>
<App initialData={initialData} />
</StaticRouter>
);
// 将初始数据注入到HTML中
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>React SSR应用</title>
</head>
<body>
<div id=\"root\">${appHtml}</div>
<script>
window.__INITIAL_DATA__ = ${JSON.stringify(initialData).replace(/</g, \'\\\\u003c\')}
</script>
<script src=\"/client.js\"></script>
</body>
</html>
`);
});
服务器端获取初始数据initialData后，将其传递给App组件进行渲染，然后把数据注入到HTML的window.__INITIAL_DATA__变量中。
// client.js - 客户端状态恢复
// 从服务器注入的全局变量中获取初始数据
const initialData = window.__INITIAL_DATA__ || {};
// 水合应用，传递相同的初始数据
hydrateRoot(
document.getElementById(\'root\'),
<BrowserRouter>
<App initialData={initialData} />
</BrowserRouter>
);
客户端从window.__INITIAL_DATA__获取数据，并在水合时传递给App组件，保证前后端状态一致。
四、水合的挑战与解决方案
（一）不匹配问题
水合过程中，经常会遇到服务器渲染的HTML与客户端React尝试渲染的内容不匹配的情况。这会在React的控制台中产生警告，还可能让应用出现异常行为。常见的原因有：
- 依赖于浏览器API的代码：像
window、document这类在服务器上不可用的API，如果在代码中使用，就容易导致不匹配。因为服务器没有浏览器环境，无法识别这些API。 - 依赖于时间的代码：例如
new Date()、Math.random()，在服务器和客户端执行时，得到的结果可能不同，从而引发不匹配。 - 条件渲染：基于客户端特定条件的渲染逻辑，在服务器端无法按照相同条件执行，也会造成不匹配。
针对这些问题，可以采用如下解决方案：
// 检查代码运行环境
const isServer = typeof window === \'undefined\';
// 条件性使用浏览器API
function MyComponent() {
const [windowWidth, setWindowWidth] = useState(0);
useEffect(() => {
// 这段代码只在客户端执行
setWindowWidth(window.innerWidth);
const handleResize = () => {
setWindowWidth(window.innerWidth);
};
window.addEventListener(\'resize\', handleResize);
return () => window.removeEventListener(\'resize\', handleResize);
}, []);
return (
<div>
{/* 在服务器上渲染一个占位符，在客户端更新为实际值 */}
<p>窗口宽度: {isServer? \'...\' : windowWidth}px</p>
</div>
);
}
这段代码通过判断window是否定义来区分服务器和客户端环境，在服务器上渲染占位符，在客户端再更新为实际值，避免了因浏览器API使用导致的不匹配问题。
（二）使用useEffect处理仅客户端的逻辑
对于那些必须在客户端执行的代码，可以利用useEffect钩子。
import { useState, useEffect } from \'react\';
function ClientOnlyComponent() {
const [mounted, setMounted] = useState(false);
const [data, setData] = useState(null);
useEffect(() => {
// 组件已挂载，可以安全地使用浏览器API
setMounted(true);
// 获取数据
fetchData().then(result => {
setData(result);
});
}, []);
// 在服务器上渲染一个加载状态
if (!mounted) {
return <div>加载中...</div>;
}
// 在客户端渲染实际内容
return (
<div>
{data? (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
) : (
<p>加载数据...</p>
)}
</div>
);
}
在这个组件中，通过useEffect确保只有在组件挂载到客户端后才执行获取数据等依赖浏览器API的操作，在服务器上则渲染加载状态，避免影响水合过程。
（三）使用动态导入避免服务器端执行
对于那些完全不能在服务器上运行的代码，可以采用动态导入的方式。
import { useState, useEffect } from \'react\';
function ComponentWithBrowserAPI() {
const [BrowserComponent, setBrowserComponent] = useState(null);
useEffect(() => {
// 动态导入仅在客户端执行的组件
import(\'./BrowserOnlyComponent\').then(module => {
setBrowserComponent(() => module.default);
});
}, []);
return (
<div>
<h1>我的组件</h1>
{BrowserComponent? <BrowserComponent /> : <p>加载中...</p>}
</div>
);
}
通过动态导入，将依赖浏览器API的组件延迟到客户端执行，防止在服务器端执行时出现问题。
五、高级水合技术
（一）选择性水合
选择性水合允许应用的不同部分在不同时间进行水合操作，可以优先处理关键路径。
// 使用React.lazy和Suspense实现选择性水合
import { Suspense, lazy } from \'react\';
// 懒加载非关键组件
const NonCriticalComponent = lazy(() => import(\'./NonCriticalComponent\'));
function App() {
return (
<div>
<CriticalComponent />
<Suspense fallback={<div>加载中...</div>}>
<NonCriticalComponent />
</Suspense>
</div>
);
}
利用React.lazy和Suspense，先加载关键组件，非关键组件在后续进行水合，提高关键路径的加载速度。
（二）渐进式水合
渐进式水合使得应用在HTML还未完全加载时就可以开始水合过程。
// 使用React 18的createRoot和hydrateRoot实现渐进式水合
import { hydrateRoot } from \'react-dom/client\';
// 水合根组件
hydrateRoot(
document.getElementById(\'root\'),
<App />,
{
// 启用渐进式水合
onRecoverableError: (error) => {
console.warn(\'水合恢复错误:\', error);
}
}
);
在React 18中，通过配置hydrateRoot的参数，实现渐进式水合，即使在水合过程中出现可恢复的错误，也能继续进行并给出提示。
（三）流式SSR与水合
React 18引入的流式SSR，让服务器可以逐步发送HTML，客户端在接收到部分HTML时就能开始水合。
// 服务器端流式渲染
import { renderToPipeableStream } from \'react-dom/server\';
app.get(\'*\', (req, res) => {
const { pipe, abort } = renderToPipeableStream(
<App />,
{
bootstrapScripts: [\'/client.js\'],
onShellReady() {
res.setHeader(\'Content-Type\', \'text/html\');
pipe(res);
},
onError(error) {
console.error(\'渲染错误:\', error);
abort();
}
}
);
// 设置超时
setTimeout(() => {
abort();
}, 5000);
});
服务器端利用renderToPipeableStream进行流式渲染，在onShellReady时将渲染的内容发送给客户端，同时设置超时机制，防止出现异常情况。
六、水合性能优化
（一）减少水合不匹配
// 使用useLayoutEffect的替代方案
import { useEffect, useLayoutEffect } from \'react\';
// 创建一个在服务器上使用useEffect，在客户端使用useLayoutEffect的钩子
const useIsomorphicLayoutEffect = typeof window!== \'undefined\'? useLayoutEffect : useEffect;
function Component() {
useIsomorphicLayoutEffect(() => {
// 这段代码在服务器上使用useEffect，在客户端使用useLayoutEffect
// 避免水合不匹配
}, []);
return <div>内容</div>;
}
通过判断环境，选择合适的useEffect或useLayoutEffect，减少因不同环境下钩子执行差异导致的水合不匹配问题。
（二）延迟非关键水合
// 使用requestIdleCallback延迟非关键水合
function App() {
useEffect(() => {
if (\'requestIdleCallback\' in window) {
requestIdleCallback(() => {
// 在浏览器空闲时执行非关键水合
hydrateNonCriticalComponents();
});
} else {
// 回退到setTimeout
setTimeout(hydrateNonCriticalComponents, 100);
}
}, []);
return (
<div>
<CriticalContent />
<div id=\"non-critical-root\"></div>
</div>
);
}
function hydrateNonCriticalComponents() {
hydrateRoot(
document.getElementById(\'non-critical-root\'),
<NonCriticalContent />
);
}
利用requestIdleCallback在浏览器空闲时进行非关键组件的水合操作，如果浏览器不支持，则使用setTimeout作为回退方案，优化整体性能。
七、调试水合问题
（一）检测水合不匹配
在开发模式下，React会在控制台显示水合不匹配的警告。在生产环境中，可以通过以下代码来检测不匹配情况：
// 客户端入口
import { hydrateRoot } from \'react-dom/client\';
// 创建一个包装器来检测水合不匹配
function HydrationWrapper({ children }) {
useEffect(() => {
// 水合完成后，检查DOM是否与React期望的匹配
const root = document.getElementById(\'root\');
const reactRoot = root._reactRootContainer;
if (reactRoot && reactRoot._internalRoot) {
const fiber = reactRoot._internalRoot.current;
// 检查是否有不匹配
if (fiber.memoizedState && fiber.memoizedState.element) {
console.log(\'水合完成，检查不匹配...\');
// 这里可以添加自定义的不匹配检测逻辑
}
}
}, []);
return children;
}
// 使用包装器进行水合
hydrateRoot(
document.getElementById(\'root\'),
<HydrationWrapper>
<App />
</HydrationWrapper>
);
通过创建HydrationWrapper组件，在水合完成后检查DOM与React期望的匹配情况，方便排查问题。
（二）使用React DevTools调试
React DevTools是一个强大的调试工具，它可以帮助我们检查组件树和状态，在调试水合问题时非常有用。通过它，我们可以直观地看到组件的层级结构、状态变化等信息，快速定位问题所在。
还没有评论呢，快来抢沙发~