Next.js问题：如何将SSR中的Cookie传递至浏览器？

问题翻译 #

我调用fetch('/setCookies')接口为客户端设置Cookie。在客户端运行该调用时，Cookie能正常显示；但在服务端运行时，浏览器中无法看到Cookie。我已尝试显式设置域名等操作，相关代码如下：

const Page = async () => {
   await fetch('/setCookies') <--- 此处运行在服务端
   return <Client/> 
}

服务端组件中发起的fetch请求是在服务器环境内执行的，请求响应中的Set-Cookie头只会被服务器本身处理，不会传递到用户的浏览器中。浏览器仅会处理由自身发起的请求所返回的Set-Cookie头——这就是客户端调用能正常设置Cookie、服务端调用不行的核心原因。

1. 将请求移至客户端组件执行（推荐） #

把fetch('/setCookies')的调用放到客户端组件中，用useEffect钩子在组件挂载时发起请求，确保请求由浏览器触发：

'use client';

import { useEffect } from 'react';

const Client = () => {
  useEffect(() => {
    const setCookies = async () => {
      await fetch('/setCookies');
    };
    setCookies();
  }, []);

  return <div>客户端组件内容</div>;
};

export default Client;

2. 服务端处理后传递给客户端手动设置（仅特殊场景使用） #

如果必须在服务端完成前置逻辑，可在服务端获取Cookie内容后，通过props传给客户端组件，再手动写入浏览器：

// 服务端组件
const Page = async () => {
  const res = await fetch('/setCookies', { credentials: 'include' });
  const setCookieHeader = res.headers.get('Set-Cookie');
  return <Client setCookieHeader={setCookieHeader} />;
};

// 客户端组件
'use client';

import { useEffect } from 'react';

const Client = ({ setCookieHeader }) => {
  useEffect(() => {
    if (setCookieHeader) {
      // 解析并设置Cookie（需注意多Cookie场景的拆分处理）
      document.cookie = setCookieHeader.split(';')[0];
    }
  }, [setCookieHeader]);

  return <div>客户端组件内容</div>;
};

确保/setCookies接口返回的Set-Cookie头包含正确属性：

• SameSite：建议设为Lax或Strict，规避跨域问题
• Domain：需与当前页面域名一致（或父域名，若允许子域共享）
• Path：通常设为/，确保全站可用
• HttpOnly：若无需前端JS访问Cookie，建议开启以提升安全性

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