Next.js 13.5部署Vercel后SSR失效，本地正常求排查

本地localhost:3000运行时，服务端渲染（SSR）功能正常，Cookie能正常发送至后端；但部署到Vercel生产环境后SSR失效，日志报错TypeError: Cannot read properties of undefined (reading 'value')，无法读取sessionid和csrftoken的value。

相关代码 #

async function getData() {
  const cookieStore = cookies();
  const session_id = cookieStore.get("sessionid");
  const csrftoken = cookieStore.get("csrftoken");
  
  try {
   
    const userisAdmin = await fetch(`${domain_name}/user_staff`, {
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
        'Cookie': `sessionid=${session_id.value}; csrftoken=${csrftoken.value}`,
      },
      
   });

     const result = await userisAdmin.json()   
  
    return {
      userprofile: result ,
    };
  } catch (error) {
    console.error('Error:', error);
    return {
      userprofile: null,
    };
  }
}

export default async function Adminpage() {
  const user = await getData();
  console.log(user)

  return (
    <>
        {user?.userprofile?.extra_data?.name ?(<>
          <Admin UserName={user.userprofile.extra_data.name}  />
        </>):(<>... others code 

错误日志 #

Error: TypeError: Cannot read properties of undefined (reading 'value')
    at getData (/var/task/fontendfb/.next/server/app/admin/page.js:1:21272)
    at Adminpage (/var/task/fontendfb/.next/server/app/admin/page.js:1:21445)
    at /var/task/fontendfb/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:109:21573
    at /var/task/fontendfb/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:109:21702
    at async ev (/var/task/fontendfb/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:109:21396)
    at async /var/task/fontendfb/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:109:20518
    at async Promise.all (index 0)
    at async ev (/var/task/fontendfb/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:109:20287)
    at async /var/task/fontendfb/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:109:20518
    at async Promise.all (index 0)

问题原因及解决办法 #

1. 未处理Cookie不存在的边界情况 #

本地环境下浏览器已保存sessionid和csrftoken，所以cookieStore.get()能返回有效值；但生产环境中，用户首次访问、Cookie过期或未携带时，cookieStore.get()会返回undefined，直接访问.value就会触发报错。

解决方式：安全获取Cookie值，添加空值判断：

async function getData() {
  const cookieStore = cookies();
  const session_id = cookieStore.get("sessionid");
  const csrftoken = cookieStore.get("csrftoken");

  // 使用可选链或三元运算符处理undefined情况
  const sessionIdValue = session_id?.value || '';
  const csrfTokenValue = csrftoken?.value || '';
  
  try {
    const userisAdmin = await fetch(`${domain_name}/user_staff`, {
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
        // 仅当存在有效Cookie时才添加请求头
        ...(sessionIdValue || csrfTokenValue ? {
          'Cookie': `sessionid=${sessionIdValue}; csrftoken=${csrfTokenValue}`
        } : {})
      },
    });

    const result = await userisAdmin.json();
  
    return {
      userprofile: result,
    };
  } catch (error) {
    console.error('Error:', error);
    return {
      userprofile: null,
    };
  }
}

2. Vercel生产环境的Cookie跨域配置问题 #

如果前端Vercel域名和后端域名不同，后端设置的Cookie需要满足跨域传输要求：

• 检查后端Cookie的SameSite属性，需设置为SameSite=None，同时搭配Secure属性（Vercel生产环境默认HTTPS，该属性生效），确保跨域环境下Cookie能被Vercel的SSR服务读取。
• 确认后端Cookie的Domain属性是否正确，需设置为允许前端Vercel域名携带，例如Domain=.your-backend-domain.com（子域名共享场景），或不设置（默认当前域名）但确保前后端域名符合跨域规则。
• 检查Vercel项目的环境变量domain_name是否配置为后端正式域名，而非本地localhost。

3. 补充：fetch请求的credentials配置（可选） #

虽然你手动构造了Cookie头，也可以尝试在fetch中添加credentials: 'include'，确保请求自动携带Cookie（需后端配合允许跨域携带凭证）：

const userisAdmin = await fetch(`${domain_name}/user_staff`, {
  method: 'get',
  credentials: 'include', // 添加此行
  headers: {
    'Content-Type': 'application/json',
    // 若使用credentials，可省略手动构造Cookie头，视后端配置选择
    // 'Cookie': `sessionid=${sessionIdValue}; csrftoken=${csrfTokenValue}`
  },
});

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