增量静态生成实战经验与性能优化全解析

先看效果，再看代码

增量静态生成（Incremental Static Regeneration，简称ISR）这玩意儿，我最近在项目里折腾了一阵子。说白了，它就是让你的静态页面能“动态更新”，听起来很矛盾对吧？但亲测有效，尤其是那些需要SEO友好又不能完全静态的场景。

比如我之前做的一个博客系统，文章列表页是静态生成的，但每小时可能会有新文章发布。用传统的SSG（静态站点生成）就得全量重新构建，太浪费资源了。换成ISR后，每次访问时后台自动拉取最新数据，只更新改动的部分。核心代码其实很简单：

export async function getStaticProps() {
  const res = await fetch('https://jztheme.com/api/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
    revalidate: 60, // 每60秒重新验证一次数据
  };
}

上面这段代码的意思是：第一次访问时生成静态页面，之后每60秒检查一次数据是否有变化。如果有变化就更新，没有变化就继续用缓存。这种机制真的很香。

这个场景最好用

ISR最适合的场景是什么？我总结了一下，主要有三个：

• 内容频繁更新但不需要实时性：比如新闻网站、博客、电商商品列表。这些页面的数据可能每小时甚至几分钟就变一次，但用户并不需要看到毫秒级的更新。
• 流量波动大的页面：比如活动页面或促销页。如果流量突然暴增，ISR可以利用缓存扛住压力，同时后台慢慢更新数据。
• SEO要求高的页面：搜索引擎喜欢静态页面，但静态页面又不够灵活。ISR完美解决了这个问题。

举个例子，我之前做了一个电商的商品分类页，用了ISR后性能提升了好几倍。代码结构类似这样：

export async function getStaticPaths() {
  const res = await fetch('https://jztheme.com/api/categories');
  const categories = await res.json();

  const paths = categories.map(category => ({
    params: { id: category.id.toString() },
  }));

  return { paths, fallback: 'blocking' }; // fallback设为blocking更稳妥
}

export async function getStaticProps({ params }) {
  const res = await fetch(https://jztheme.com/api/category/${params.id});
  const category = await res.json();

  return {
    props: {
      category,
    },
    revalidate: 300, // 每5分钟重新验证一次
  };
}

这里的核心点是fallback: 'blocking'，建议直接用这种方式，避免一些奇怪的加载问题。

踩坑提醒：这三点一定注意

ISR看起来简单，但实际用的时候还是有不少坑的。我踩过几次，分享一下：

1. 数据源不稳定：如果你的数据源API偶尔会超时或者返回错误，那ISR可能会导致页面卡死或者显示空白。我的解决办法是在fetch时加一个timeout：

const fetchData = async (url) => {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 5000); // 超时5秒
  try {
    const res = await fetch(url, { signal: controller.signal });
    if (!res.ok) throw new Error('Failed to fetch');
    return await res.json();
  } catch (error) {
    console.error(error);
    return null; // 返回null防止页面崩溃
  } finally {
    clearTimeout(timeoutId);
  }
};

2. 缓存冲突：有时候你会发现页面明明应该更新了，但还是显示老数据。这是因为CDN缓存和ISR缓存打架了。我的经验是，在部署时清空CDN缓存，或者在请求路径上加时间戳：

const res = await fetch(https://jztheme.com/api/posts?timestamp=${Date.now()});

3. Fallback模式选择：Next.js提供了三种fallback模式：false、true和'blocking'。我个人强烈推荐'blocking'，因为它最稳定。true虽然性能更好，但容易出现页面闪烁的问题。

高级技巧：如何结合动态路由

ISR和动态路由结合使用时，有一个小技巧可以大幅提升开发效率。比如你有一个动态路由/post/[id]，可以通过预生成部分热门页面来减少首次访问的延迟：

“javascript
export async function getStaticPaths() {
const res = await fetch('https://jztheme.com/api/posts');
const posts = await res.json();

return { paths, fallback: 'blocking' };
}
`>

这样做的好处是，热门页面会优先生成静态文件，冷门页面则按需生成。既节省了构建时间，又优化了用户体验。

拓展用法还有很多

ISR的功能远不止这些，比如你可以结合边缘计算（Edge Functions）进一步提升性能，或者通过自定义缓存策略实现更复杂的业务逻辑。不过这些内容展开讲又是一大篇了。

以上是我个人对ISR的完整讲解，有更优的实现方式欢迎评论区交流。这个技巧的拓展用法还有很多，后续会继续分享这类博客。