Next.js13 App Router中如何保留SSG并禁用部署间缓存？

核心原因 #

你遇到的问题确实是Next.js的Data Cache导致的——该缓存会在多次构建之间持久化存储fetch的数据，即使修改了CMS内容，构建时Next.js仍会复用旧缓存数据，而非重新请求CMS获取最新内容。

可行解决办法 #

1. 构建前手动清除数据缓存

Next.js的Data Cache默认存储在.next/cache目录下，在执行next build前删除该目录，就能强制构建时重新拉取所有最新数据，同时保留SSG特性。

修改package.json中的构建脚本：

// macOS/Linux环境
"scripts": {
  "build": "rm -rf .next/cache && next build",
  "start": "next start"
}

// Windows环境
"scripts": {
  "build": "rd /s /q .next\\cache && next build",
  "start": "next start"
}

之后执行npm run build时，会先清除缓存再构建，确保获取最新CMS数据。

2. 给fetch请求添加构建唯一标识

通过在fetch的URL中添加一个仅在构建时生成的唯一参数（比如时间戳），让每次构建的请求URL不同，从而绕过持久化缓存。

修改/articles.ts中的代码：

export async function getArticleBySlug(slug){
    try {
        // 仅在生产构建阶段添加时间戳，避免开发环境频繁变更URL
        const cacheBustParam = process.env.NODE_ENV === 'production' ? `?t=${Date.now()}` : '';
        const res = await fetch(`${path}${cacheBustParam}`, { method: 'GET' })
        return await res.json()
    } catch (error) {
        console.log(error)
        return null
    }
}

这种方式不需要手动清理缓存，每次构建时的请求都会被视为新请求，强制拉取最新数据，同时页面依然是SSG静态生成。

3. 增量静态再生（ISR）（可选）

如果希望在构建后也能定期更新数据，而非仅在构建时更新，可以使用ISR。在页面组件中添加revalidate属性：

// [slug]/page.tsx
export default async function Article({ params }) {
    const article = await getArticleBySlug(params.slug)
    return <div>{article.data}</div>
}

// 设置每60秒重新生成一次页面（可根据需求调整时长）
export const revalidate = 60;

这种方式既保留了静态页面的优势，又能定期获取最新数据，虽不属于纯SSG，但如果需求允许一定的更新延迟，这也是不错的选择。

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