Docker部署多环境Next.js时，如何实现ISR启动预生成页面？

一、ISR方案的可行实现方式 #

Next.js原生并不支持revalidateOnStartup这个配置项，你需要调整思路来实现启动后立即生成初始页面的需求，以下是两种可行方案：

1. 动态路由结合fallback: 'blocking'（针对动态路由页面） #

如果你的页面是动态路由（如pages/posts/[id].js），可以利用ISR的fallback机制，让页面在首次请求时触发数据获取和静态生成：

export async function getStaticPaths() {
  // 构建阶段无法访问数据库，返回空路径数组，设置fallback为blocking
  return { paths: [], fallback: 'blocking' };
}

export async function getStaticProps(context) {
  // 服务器启动后可正常访问数据库，编写数据获取逻辑
  const data = await fetch(`${process.env.DATABASE_API}/data`).then(res => res.json());
  return {
    props: { data },
    revalidate: 3600 // 1小时后自动触发重验证更新
  };
}

服务器启动后，第一个访问该页面的请求会触发getStaticProps执行，生成带数据的静态页面并缓存，后续请求直接返回缓存内容，到重验证时间后自动后台更新。

2. 自定义启动预渲染脚本（支持静态/动态路由） #

对于静态路由（如首页pages/index.js），构建阶段getStaticProps会被执行，此时可返回空数据并设置重验证间隔：

export async function getStaticProps() {
  let data = {};
  try {
    // 尝试访问数据库，构建阶段失败则返回空数据
    data = await fetch(`${process.env.DATABASE_API}/data`).then(res => res.json());
  } catch (err) {
    // 构建阶段数据库不可达，忽略错误
  }
  return {
    props: { data },
    revalidate: 3600
  };
}

接着编写一个预渲染脚本（如pre-render.js），在服务器启动后自动请求目标页面触发初始生成：

// pre-render.js
const fetch = require('node-fetch');

async function preRenderPages() {
  await fetch('http://localhost:3000'); // 请求首页
  // 可添加其他需要预生成的页面路径
  console.log('预渲染完成');
}

preRenderPages();

修改package.json的启动脚本，先启动服务器再执行预渲染：

"scripts": {
  "start": "next start & node pre-render.js"
}

这样服务器启动后，脚本会自动触发页面请求，强制getStaticProps重新执行并生成带数据的静态页面，无需等待1小时的初始重验证间隔。

二、SSR+CDN缓存的替代方案 #

如果ISR的方案不符合你的需求，SSR结合CDN缓存是完全可行的替代方案，用户体验与ISR一致：

1. 改用SSR模式，通过getServerSideProps获取数据并设置缓存头：

export async function getServerSideProps({ res }) {
  // 设置CDN缓存策略：缓存1小时，过期后后台更新缓存并返回旧内容
  res.setHeader('Cache-Control', 's-maxage=3600, stale-while-revalidate');
  const data = await fetch(`${process.env.DATABASE_API}/data`).then(res => res.json());
  return { props: { data } };
}

2. 配置CDN缓存规则，让CDN缓存页面响应。用户请求时，CDN会直接返回缓存内容；缓存过期后，CDN会后台向服务器发起请求更新缓存，同时返回旧缓存内容，避免用户等待。

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