javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > Next.js服务端渲染超时

Next.js服务端渲染超时导致生产事故的问题排查和解决办法

作者:HyaCinth

Next.js是一个基于React的开源框架,用于构建服务端渲染(SSR)的Web应用程序,它简化了许多复杂的配置,让开发者可以专注于编写应用逻辑而不是基础设施,前几天公司平台首页崩溃了 504 Time-out,这里记录一下问题排查和解决的过程,需要的朋友可以参考下

前言

前几天公司平台首页崩溃了 504 Time-out,这里记录一下问题排查和解决的过程。

排查和解决

排查过程

问题定位

首页开启了SSR渲染,getServerSideProps中的请求使用了简单的fetch请求,只对普通错误做了兜底,但没有考虑到请求超时的问题,请求超时导致了页面返回超时,首页报了504错误。

解决方案

优化方案

方案比较

实际解决方案

fetch迁移到axios,借助axios已有的超时处理配置解决当前问题,添加首页对getServerSideProps中请求超时的兜底,服务端请求超时后,立即返回空数组。

首页所有的数据消费组件继续兜底,当从getServerSideProps中获取的数据为空数组时,会在客户端再发一次请求,尝试从客户端获取数据。

import axios from 'axios';

const ssrAxios = axios.create({
  timeout: 3000,
  timeoutErrorMessage: 'Request timed out'
});

export default ssrAxios;
export const getServerSideProps = async () => {
  const addr = process.env.API_ADDR;

  // 使用 Promise.allSettled 获取所有请求的结果
  const [
    list1Res,
    // ... ,
    list2Res,
  ] = await Promise.allSettled([
    ssrAxios.get(`${addr}/api/list1`),
    // ... ,
    ssrAxios.get(`${addr}/api/list2`),
  ]);

  // 处理每个请求的结果
  const list1 = handleFetchResult(list1Res, 'list1');
  // ... ;
  const list2 = handleFetchResult(list2Res, 'list2');

  return {
    props: {
      list1: list1 ?? [],
      // ... ,
      list2: list2 ?? []
    },
  };
};

// Helper function to handle fetch results
const handleFetchResult =  (result: PromiseSettledResult<any>, key: string) => {
  if (result.status === 'rejected') {
    console.error(`Failed to fetch ${key}:`, result.reason);
    return [];
  }

  const { data, success } = result.value.data;
  if (!success) {
    console.error(`Failed to fetch ${key}`);
    return [];
  }

  switch (key) {
    case 'list1':
      return data?.result || [];
	// ... ;
    case 'list2':
      return data?.result || [];
    default:
      return [];
  }
};

问题探究

问题猜测

验证猜想

本地模拟接口返回超时,首页会无法成功加载。添加超时处理兜底后,首页其他内容可以正常展示。

询问deepseek后,得知Next.jsgetServerSideProps没有内置超时处理机制,因此长时间运行的getServerSideProps可能导致页面无法及时返回,甚至触发部署平台(如Vercel)的超时错误。

结论

首页开启了SSR渲染,Next.js 必须在完成getServerSideProps中的所有操作后才能生成页面并返回给客户端。 需要在得到所有需要的props后,才会返回整个页面。因为生产环境某个接口请求超时,并且没有正确处理,可能会导致整个getServerSideProps的执行时间延长,超过服务器的响应时间限制,从而使得页面无法及时返回,出现超时错误。

思考改进

思考

虽然是因为后端服务崩了,接口请求超时导致的问题,但是因为部分服务崩掉导致整个前端首页无法成功加载,作为前端开发人员的我还是有很大责任的。开发时我在对可能出现的错误进行兜底时,需要尽可能地考虑全面。

改进

服务端请求优化,错误处理添加对请求超时的处理。

① 首次访问使用SSR获取最新数据;

② 当SSR超时时自动降级到 CSR版本 ;

③ 保持首屏加载性能的同时提升可用性。

以上就是Next.js服务端渲染超时导致生产事故的排查和解决办法的详细内容,更多关于Next.js服务端渲染超时的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文