Next.js部署Netlify后用预加载值初始化变量报500错误

核心原因：服务端渲染时的props序列化/解析异常 #

本地开发与Netlify生产环境的差异，大概率是getServerSideProps返回的item包含不可序列化的内容（比如函数、循环引用、Symbol、BigInt等）。

本地开发时Next.js的序列化规则相对宽松，而Netlify的生产构建/SSR环境下，Next.js会严格按照JSON标准序列化props。当服务端渲染组件时，直接访问pageProps.item、通过useMemo返回它、或者用它初始化useState，都会触发对不可序列化内容的解析，抛出未被捕获的错误，导致500。

而useEffect+useState的方式能正常运行，是因为：

• 服务端渲染阶段，item初始值是undefined，不会渲染<Product>组件，避免了触发错误；
• 客户端hydration阶段才会执行useEffect设置item，此时浏览器对数据的解析限制更少，不会报错，但代价是服务端没有渲染产品内容，爬虫无法抓取。

为什么useMemo无效？ #

useMemo在服务端渲染时会同步执行，依赖pageProps.item的话，本质还是直接返回这个有问题的对象，和直接取props没有区别，同样会触发解析错误。

解决方案 #

1. 修复getServerSideProps的props序列化问题 #

在返回props前，确保result.page.item是完全可序列化的JSON：

export const getServerSideProps: GetServerSideProps<ProductPageProps> = async (context) => {
  const result = await checkProductRoute(fii, name);
  // ...

  switch (result.response) {  
    //...

    default: 
      if (!result.page) throw new Error("Error getting page data!");

      // 清理不可序列化内容，比如循环引用、函数等
      const serializablePage = JSON.parse(JSON.stringify(result.page));
      // 或者手动筛选需要的属性，避免携带冗余/不可序列化字段
      // const serializablePage = {
      //   item: {
      //     id: result.page.item.id,
      //     category: result.page.item.category,
      //     // 只保留需要的可序列化属性
      //   }
      // };

      return { props: { ...serializablePage /* 其他无关内容 */ } };
  }
};

2. 加强服务端错误捕获与校验 #

不要直接throw字符串，改用标准Error对象，同时提前校验item的结构：

export const getServerSideProps: GetServerSideProps<ProductPageProps> = async (context) => {
  try {
    const result = await checkProductRoute(fii, name);
    // ...

    switch (result.response) {  
      //...

      default: 
        if (!result.page || !result.page.item) {
          return { notFound: true }; // 返回404而非500，更友好
        }
        // 校验item的必要属性
        if (!result.page.item.category) {
          throw new Error("Missing required category field in item");
        }
        return { props: { ...result.page /* 其他无关内容 */ } };
    }
  } catch (err) {
    console.error("getServerSideProps error:", err); // 强制输出日志，方便Netlify排查
    return { notFound: true };
  }
};

3. 调试Netlify SSR日志 #

在组件的服务端渲染阶段添加日志，确认item的结构：

const ProductPage = (pageProps: ProductPageProps) => {
  // 服务端渲染时输出item
  if (typeof window === 'undefined') {
    console.log("Server-side item:", pageProps.item);
  }

  const item = pageProps.item;
  // ...
};

Netlify的函数日志（对应Next.js的SSR函数）应该能看到这些输出，帮助定位具体是item的哪个字段导致了序列化异常。

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