NextJS 13 App路由：SSR时客户端组件如何获取Cookie？

针对你提出的限制条件（不能在客户端组件用next/headers、SSR期间不能用document.cookie、不想通过服务端组件传props），以下是两种可行方案：

方案1：利用useEffect延迟客户端Cookie读取 #

通过React的useEffect钩子，确保Cookie读取逻辑仅在客户端hydrate完成后执行，规避SSR阶段的document访问限制和hydration失败问题。

修改clientComponent.tsx如下：

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

export default function ClientComponent() {
  const [myCookie, setMyCookie] = useState<string | null>(null);

  useEffect(() => {
    // 封装Cookie读取工具函数
    const getCookie = (name: string) => {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop()?.split(';').shift() || null;
      return null;
    };
    // 仅在客户端挂载后读取Cookie并更新状态
    setMyCookie(getCookie("myCookie"));
  }, []);

  return <> {myCookie} </>; 
}

原理说明 #

• useEffect的回调函数不会在SSR渲染阶段执行，只会在客户端组件挂载完成后触发，此时访问document.cookie是安全的
• 状态更新会触发组件重新渲染，正确展示Cookie内容，不会出现hydration不匹配的错误

方案2：禁用组件SSR，完全客户端渲染 #

通过Next.js的dynamic导入，将客户端组件设置为仅在客户端渲染，这样可以直接在组件中读取document.cookie，无需担心SSR阶段的限制。

步骤1：修改page.tsx的组件导入方式 #

import dynamic from 'next/dynamic';

// 禁用SSR，组件仅在客户端加载渲染
const ClientComponent = dynamic(() => import('./clientComponent'), { ssr: false });

export default async function Page() {
  return <ClientComponent />;
}

步骤2：简化clientComponent.tsx的Cookie读取逻辑 #

"use client";

export default function ClientComponent() {
  const getCookie = (name: string) => {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop()?.split(';').shift() || null;
    return null;
  };
  const myCookie = getCookie("myCookie");

  return <> {myCookie} </>; 
}

原理说明 #

• 设置ssr: false后，该组件不会参与服务端渲染流程，完全在浏览器环境中加载和执行
• 直接访问document.cookie不会触发任何SSR相关的错误，也无需通过服务端组件传递props

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