Next.js使用getServerSideProps或getInitialProps后页面持续加载无内容如何解决

问题原因及修复方案 #

• 1. 重定向逻辑未结束响应导致请求挂起
  你在判断用户不存在时仅调用了context.res.writeHead设置跳转状态，没有调用context.res.end()结束响应，服务端会一直保持请求连接不返回，最终表现为浏览器无限加载。同时你没有使用Next.js官方提供的标准重定向写法，手动操作响应对象容易出问题。
  修复方案（针对getServerSideProps，官方推荐写法）：

if (!user.data?.user) {
  return {
    redirect: {
      destination: '/welcome', // 用相对路径即可，无需写全域名
      permanent: false, // 对应307临时重定向
    },
  }
}

如果是getInitialProps必须手动操作响应的场景，补充end调用：

if (!user.data?.user) {
  context.res.writeHead(307, { Location: "/welcome" });
  context.res.end(); // 必须加这行结束响应
  return {};
}

• 2. 序列化了Apollo查询返回的完整对象，存在不可序列化内容
  apolloClient.query返回的结果包含大量内置非序列化属性（内部引用、状态字段等），直接对整个返回值执行JSON.stringify会卡住序列化过程，甚至抛出未捕获错误导致请求无返回。
  修复方案：仅序列化你需要的data字段即可：

// getServerSideProps写法
return {
  props: {
    data: JSON.stringify(user.data, null, 2),
  },
};

// getInitialProps写法
return {
  data: JSON.stringify(user.data, null, 2),
};

• 3. 组件内直接修改Props不符合React规范
  你在组件内写了data = JSON.parse(data)直接修改传入的Props，属于错误写法，虽然不会直接导致加载卡住，但可能引发后续渲染异常。
  修复方案：将解析后的值存入新变量：

const Home: NextPage<Props> = ({ data }) => {
  const parsedData = data ? JSON.parse(data) : null;
  // 后续逻辑使用parsedData即可
  // ...其余代码
}

• 4. 服务端Apollo Client实例复用问题
  如果你的apolloClient是全局单例，服务端渲染时多个请求会复用同一个实例，容易出现请求串数据、请求卡住的问题。需要保证每次服务端请求都生成一个新的Apollo Client实例。

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