Next.js SSR中getServerSideProps如何处理接口404等错误？

getServerSideProps 全程运行在服务端，所有接口请求、逻辑执行产生的错误必须在函数内部完成捕获，未处理的异常会直接触发Next.js默认500错误页。Next.js 原生提供了针对服务端渲染错误的专属返回配置，不需要引入第三方依赖即可完成404、服务端异常的捕获和兜底。

现有代码的最小改造实现 #

你当前的代码没有加任何异常捕获逻辑，一旦getAllBurger()请求返回404、服务端异常或者网络超时，await 会直接抛出未捕获异常，最终返回500状态码。
改造时先给请求逻辑包裹try/catch块，再根据接口返回的状态码匹配对应处理逻辑，参考代码如下：

export async function getServerSideProps(context) {
  try {
    const res = await getAllBurger();
    // 如果你的请求封装不会在4xx/5xx状态码时抛异常，需要在try块内判断状态
    if (res.status === 404) {
      // 直接触发Next.js内置404页面渲染
      return { notFound: true };
    }
    return {
      props: { burgers: res.data },
    };
  } catch (err) {
    // 适配axios这类请求库：4xx/5xx错误会进入catch块，从err上取状态码
    const statusCode = err.response?.status || err.status;
    if (statusCode === 404) {
      return { notFound: true };
    }
    // 其余异常走兜底逻辑，返回空数据和错误提示给组件
    return {
      props: {
        burgers: [],
        fetchError: '菜品列表加载失败，请稍后重试'
      }
    };
  }
}

可行处理方案对比 #

• 内置404页方案
  直接返回{ notFound: true }，Next.js会自动渲染项目中pages目录下自定义的404页面，适合当前页面对应的核心资源完全不存在、没有任何可展示内容的场景，比如单条菜品详情页对应的菜品已被下架删除。
• 组件内兜底渲染方案
  接口异常时在props中返回空数据、错误提示字段，页面组件拿到props后判断数据状态，渲染兜底UI（比如空状态提示、重试按钮、页面基础框架），适合列表类页面，哪怕接口异常也能保留站点导航、基础布局，用户体验优于直接跳全页错误。
  组件侧适配参考：

  export default function BurgerListPage({ burgers, fetchError }) {
    return (
      <div>
        <h1>全部汉堡</h1>
        {fetchError && <div className="error-tip">{fetchError}</div>}
        {burgers.length === 0 && !fetchError ? (
          <div className="empty-tip">暂时没有上架的汉堡菜品</div>
        ) : (
          <ul className="burger-list">
            {burgers.map(burger => <li key={burger.id}>{burger.name}</li>)}
          </ul>
        )}
      </div>
    )
  }
  

• 重定向方案
  如果接口404代表当前页面路由已永久失效，可直接返回redirect配置跳转到有效页面，比如菜单首页、站点首页，参考配置：

  return {
    redirect: {
      destination: '/menu',
      permanent: false,
    }
  }
  

  适合旧路由下线、资源迁移到其他地址的场景。
• 全局错误页兜底
  可在pages目录下新建_error.jsx自定义全局错误页，统一处理所有SSR页面未单独捕获的异常，根据错误状态码渲染对应UI，这个方案作为全局兜底使用，单个页面的定制化错误逻辑还是要在对应页面的getServerSideProps中单独处理。

开发注意事项 #

• 所有getServerSideProps中的异步请求必须包裹try/catch，服务端未捕获的异常会直接返回500错误，影响用户体验。
• 错误类型要做区分：404代表资源不存在，5xx代表服务端异常，网络超时代表链路故障，不要所有错误都统一返回404。
• 如果使用axios作为请求库，默认配置下接口返回4xx/5xx状态码会直接抛出异常，必须在catch块中读取err.response.status判断状态，不要只在try块中做状态判断。
• 兜底逻辑不要返回硬编码的敏感信息，返回空数组、通用提示文案即可满足需求。

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