Next 14条件渲染异常：值为false却始终渲染true内容

问题重现 #

• 标记为"use client"的ProblematicComponent组件中，useState初始化逻辑明确返回false，控制台打印isVisible始终为false；
• 但条件渲染代码{ isVisible === true && <span>{ String(isVisible) }</span> }却始终渲染<span>true</span>；
• 怀疑与服务端渲染的水合（hydration）不匹配有关，但不确定具体原因。

相关代码：

"use client";
import cookie from "js-cookie";

function getCookieValue(){
    const cookieVal = cookie.get("cookie");
    return cookieVal 
        ? JSON.parse(cookieVal) 
        : null;
}

function ProblematicComponent(){
    const [isVisible] = useState(() => {
        const cookieValue = getCookieValue();
        // 此处使用cookie进行一些同步计算...
        const guardClause = true; 
        
        if(guardClause){
            return false;
        }

        return true;
    });

    // 此处始终输出false。
    console.log(isVisible);

    return (
        <Context.Provider value={{
            // 上下文内容...
        }}> 
            <main>
                {/* 页面内容 */}
            </main> 

            {/* 尽管控制台输出false，该元素却始终渲染并显示"true" */}
            { isVisible === true && (
                <span>{ String(isVisible) }</span>
            ) }
        </Context.Provider>
    );  
}

核心原因：服务端与客户端状态不匹配导致 hydration 异常 #

useState的初始化函数会在服务端渲染阶段和客户端hydration阶段都执行。但服务端环境没有浏览器的document/window对象，js-cookie的cookie.get("cookie")会返回undefined，进而导致getCookieValue()返回null。

即使你代码里硬编码了guardClause = true，也可能触发Next.js hydration的边缘问题——本质是服务端渲染的DOM内容与客户端hydration预期的内容不一致，框架的修复机制未能正确同步DOM，最终保留了服务端渲染的结果。如果实际业务逻辑中guardClause依赖cookieValue，这种不匹配会更明显：

• 服务端渲染时，因无cookie导致初始化逻辑返回true，渲染出<span>true</span>；
• 客户端hydration时，能拿到cookie，初始化逻辑返回false，但DOM未被正确更新。

解决方案 #

方案1：用useEffect延迟客户端状态计算 #

将依赖客户端API的状态计算移到useEffect中，确保只在客户端挂载后执行，彻底避免服务端与客户端状态不一致：

"use client";
import cookie from "js-cookie";
import { useState, useEffect } from "react";

function getCookieValue(){
    const cookieVal = cookie.get("cookie");
    return cookieVal 
        ? JSON.parse(cookieVal) 
        : null;
}

function ProblematicComponent(){
    // 初始值设为undefined，服务端渲染时不触发条件渲染
    const [isVisible, setIsVisible] = useState(undefined);

    useEffect(() => {
        const cookieValue = getCookieValue();
        // 此处使用cookie进行一些同步计算...
        const guardClause = true; 
        
        setIsVisible(guardClause ? false : true);
    }, []); // 空依赖确保只执行一次

    console.log(isVisible);

    return (
        <Context.Provider value={{
            // 上下文内容...
        }}> 
            <main>
                {/* 页面内容 */}
            </main> 

            {/* 仅当isVisible明确为true时渲染 */}
            { isVisible === true && (
                <span>{ String(isVisible) }</span>
            ) }
        </Context.Provider>
    );  
}

方案2：禁用组件的服务端渲染 #

如果组件不需要SEO支持，可以用dynamic导入并禁用SSR，确保组件只在客户端渲染：

// 在父组件中导入
import dynamic from 'next/dynamic';

const ProblematicComponent = dynamic(
  () => import('./ProblematicComponent'),
  { ssr: false } // 禁用服务端渲染
);

这种方法简单直接，但会失去服务端渲染带来的性能和SEO优势，仅适合非核心页面组件。

内容的提问来源于stack exchange，提问作者Grover