NextJS中getStaticProps请求出现临时错误时应当返回什么内容？

核心实现方案 #

你需要在 catch 分支返回携带 revalidate 参数的对象，不要返回 notFound: true，利用 Next.js ISR 的降级机制处理临时故障：

export async function getStaticProps(context) {
  try {
    const res = await fetch(`https://example.com/getSomeData`)
    const data = await res.json()

    if (!data) {
      return {
        notFound: true,
      }
    }
    // 注意：原代码存在语法错误，revalidate 是和 props 平级的配置项，不能放在 props 内部
    return {
      props: { data },
      revalidate: 10
    }
  } catch (error){
    // 打印错误日志方便后续排查问题
    console.error('数据拉取失败', error)
    return {
      // 沿用和成功时相同的重验证间隔，下次请求触发时会自动重试拉取新数据
      revalidate: 10
    }
  }
}

逻辑说明 #

• Next.js 的 ISR 机制下，如果重验证阶段拉取数据失败，返回仅携带 revalidate 的对象时，框架会自动沿用之前已经生成成功的静态页面内容返回给用户，用户不会感知到故障
• 配置的 revalidate: 10 会持续生效，后续有请求进入时框架会再次尝试拉取源站数据，源站恢复后就能自动更新为最新内容，不会出现永久失效的问题

可选自定义降级逻辑 #

如果你需要让页面感知到数据拉取失败、展示自定义的友好提示，可以在返回时携带降级状态的 props：

catch (error) {
  console.error('数据拉取失败', error)
  return {
    props: {
      data: null,
      fetchFailed: true
    },
    revalidate: 10
  }
}

页面组件可以直接读取 fetchFailed 状态，自定义加载、重试等展示逻辑，不影响后续重验证逻辑。

注意事项 #

不要在临时网络故障、源站宕机这类可恢复的错误场景下返回 notFound: true 或 redirect 配置，该类配置会被 Next.js 标记为永久状态，后续不会再触发重验证，导致源站恢复后页面也无法正常访问。

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