Next.js中SSG模式下fetch无法获取新数据问题求助

问题分析 #

SSG（静态站点生成）在项目构建阶段就会完成页面内容的静态化，默认情况下不会主动重新拉取最新数据。你遇到的mock服务器数据更新但页面仍显示旧内容的问题，核心原因是静态页面已在构建阶段生成，后续不会自动触发新的数据请求。

解决方案 #

1. 禁用fetch请求缓存 #

Next.js的fetch方法在SSG场景下默认会缓存请求结果，导致构建时复用旧数据。可以通过添加cache: 'no-store'配置，强制每次请求都拉取最新数据：

修改你的fetchPosts和generateStaticParams函数：

const fetchPosts = async (params) => {
  const res = await fetch(
    `https://5875183d-18c0-49ad-b99d-8deeb4ded6a9.mock.pstmn.io/posts/${params.slug}`,
    { cache: 'no-store' } // 禁用缓存
  )
    .then((response) => response.json())
    .then((data) => data);

  return res;
};

export const generateStaticParams = async () => {
  const res = await fetch(
    "https://5875183d-18c0-49ad-b99d-8deeb4ded6a9.mock.pstmn.io/posts",
    { cache: 'no-store' } // 禁用缓存
  )
    .then((response) => response.json())
    .then((data) => data);

  return res.map((post) => ({
    slug: post.id.toString(),
  }));
};

2. 启用增量静态再生（ISR） #

如果希望页面在构建后自动定期更新数据，无需全量重新构建，可以开启增量静态再生（Incremental Static Regeneration）。在页面组件下方导出revalidate参数，指定页面重新生成的时间间隔（单位：秒）：

// 在page组件末尾添加
export const revalidate = 60; // 每60秒自动重新生成页面

该方案既保留SSG的性能优势，又能让页面定期同步最新数据。

3. 手动触发重新构建 #

如果数据更新频率低且需要立即生效，可以手动触发项目的重新构建部署，这会重新拉取所有最新数据并生成全新的静态页面。

4. 开发环境调试 #

开发环境下若仍存在缓存问题，可尝试：

• 用Ctrl+Shift+R强制刷新浏览器，清除本地缓存
• 重启Next.js开发服务，重置服务端缓存

核心原理 #

SSG的本质是构建时预渲染，所有数据请求在项目构建阶段完成，并生成静态HTML文件。若构建后数据源更新，静态页面不会自动同步，必须通过禁用缓存、ISR或重新构建来实现数据更新。

内容的提问来源于stack exchange，提问作者Choi Chan Hwan