Next.js导航栏服务端渲染不匹配警告及CSS异常求助

阿华AIGC实验室

2026-5-9

解决Next.js导航栏SSR不匹配警告问题

你的问题还原

在Next.js应用的导航栏组件中，你通过判断window是否存在来读取Cookie识别登录状态，从而渲染不同UI。但首次加载/硬刷新时出现Expected server HTML to contain a matching <div> in <div>警告，部分CSS失效；客户端跳转后恢复正常。注释掉Cookie读取逻辑后警告消失，但导航栏功能失效，且发现服务端居然会执行那段typeof window !== undefined的判断代码。

错误原因拆解

1. 服务端为何会执行`if (typeof window !== undefined)`？

Next.js是**服务端渲染(SSR)**框架，组件会先在服务端执行一遍生成HTML，再在客户端hydrate（注水）匹配。服务端环境中window是不存在的，typeof window会返回"undefined"（注意是字符串类型），而你的判断条件写的是typeof window !== undefined——这个比较的是字符串和undefined值，结果必然是true！

这就导致服务端执行时，会进入这个if分支调用getCookie，但服务端没有window也没有Cookie，所以loggedin会是undefined；而客户端执行时，window存在，会读取实际的Cookie值，这就造成了服务端渲染的HTML和客户端hydrate时的DOM结构不匹配，触发了React的 hydration mismatch警告，同时CSS失效（因为React会认为DOM结构不对，中断部分渲染逻辑）。

2. 为何会出现DOM不匹配警告和CSS异常？

服务端渲染的导航栏是基于loggedin=undefined渲染的未登录UI，而客户端hydrate时读取到Cookie后渲染的是已登录（或相反）UI，两者的DOM结构不一样。React在注水时会严格比对服务端生成的HTML和客户端生成的虚拟DOM，一旦不匹配就会抛出警告，并且可能导致样式绑定失败、交互异常等问题。

正确的解决方案

方案1：修复判断条件+使用`useEffect`延迟客户端逻辑

因为服务端没有window，我们需要确保Cookie读取逻辑只在客户端执行，同时修复判断条件：

import { useEffect, useState } from 'react';
import { getCookie } from './your-cookie-utils';

export default function Navbar() {
  const [loggedin, setLoggedin] = useState(false);

  useEffect(() => {
    // useEffect的回调只会在客户端执行
    const authCookie = getCookie('auth');
    setLoggedin(!!authCookie);
  }, []);

  return (
    <div>
      {loggedin ? (
        // 已登录UI：比如用户头像、退出按钮
        <div className="logged-in-nav">
          <span>欢迎回来！</span>
          <button>退出登录</button>
        </div>
      ) : (
        // 未登录UI：登录、注册按钮
        <div className="logged-out-nav">
          <button>登录</button>
          <button>注册</button>
        </div>
      )}
    </div>
  );
}

useEffect的回调函数不会在服务端执行，确保只有客户端会读取Cookie并更新状态。
初始loggedin设为false，服务端会渲染未登录UI，客户端hydrate后再根据Cookie更新，避免DOM不匹配。

方案2：使用Next.js的`useClient`（Next.js 13+ App Router）

如果你用的是Next.js 13+的App Router，可以直接用'use client'指令标记组件为客户端组件，这样整个组件只会在客户端执行，不会在服务端渲染：

'use client'; // 标记为客户端组件
import { useState, useEffect } from 'react';
import { getCookie } from './your-cookie-utils';

export default function Navbar() {
  const [loggedin, setLoggedin] = useState(false);

  useEffect(() => {
    setLoggedin(!!getCookie('auth'));
  }, []);

  return (
    // 你的导航栏UI逻辑
  );
}

这种方式更直接，适合不需要服务端渲染的组件（比如导航栏这类依赖客户端状态的组件）。

方案3：服务端传递Cookie（进阶）

如果需要服务端也能获取登录状态（比如渲染正确的UI给搜索引擎），可以通过Next.js的getServerSideProps（Pages Router）或Server Component（App Router）读取请求头中的Cookie，再传递给组件：

Pages Router 示例：

// pages/_app.js
function MyApp({ Component, pageProps, loggedin }) {
  return (
    <>
      <Navbar loggedin={loggedin} />
      <Component {...pageProps} />
    </>
  );
}

export async function getServerSideProps(context) {
  // 服务端读取Cookie
  const authCookie = context.req.cookies.auth;
  return {
    props: {
      loggedin: !!authCookie,
    },
  };
}

export default MyApp;

然后在Navbar组件中直接接收loggedin props，这样服务端和客户端渲染的UI完全一致，不会出现不匹配问题。