React SSR中如何让代码仅在Client-side Hydrating阶段执行？

开发者阿泽

2026-7-30

区分React SSR的三个执行阶段：服务端渲染、客户端水化、正常客户端渲染

要让代码仅在**客户端水化（Client-side Hydrating）**阶段执行，可以利用React useEffect的执行特性：useEffect的回调函数不会在hydration过程中触发，只有当组件完成hydration（或纯客户端首次挂载）后才会执行。结合状态变量就能精准区分三个阶段：

实现思路

用typeof window === 'undefined'判断服务端渲染阶段
定义状态变量isHydrated，初始值设为false，标记是否完成hydration
在useEffect中将isHydrated设为true——这一步仅在hydration完成后执行
typeof window !== 'undefined' && !isHydrated对应客户端水化阶段
typeof window !== 'undefined' && isHydrated对应正常客户端渲染阶段

完整示例代码

import { useState, useEffect } from 'react';

const useSomething = () => {
    const [isHydrated, setIsHydrated] = useState(false);

    useEffect(() => {
        // 此回调仅在hydration完成后（或纯客户端挂载后）执行
        setIsHydrated(true);
    }, []);

    if (typeof window === 'undefined') {
        // 服务端渲染阶段逻辑
        console.log('Server-side rendering');
    } else if (!isHydrated) {
        // 客户端水化阶段逻辑
        console.log('Client-side Hydrating');
    } else {
        // 正常客户端渲染阶段逻辑
        console.log('Normal client-side rendering');
    }
};