Next.js 13问题：首页为何无法设置为动态页面？

安全阿岳

2026-8-13

Next.js 13首页强制动态渲染失效的解决思路

升级Next.js版本：13.0属于App Router的早期测试版本，存在不少路由规则的bug，force-dynamic在首页不生效是已知的早期问题之一。建议升级到13.4及以上的稳定版本，后续版本修复了大量App Router的渲染逻辑问题。
替换dynamic配置为revalidate=0：在Next.js 13中，export const revalidate = 0的效果等同于force-dynamic，且部分场景下优先级更高。可以替换原有的dynamic导出，改为：
```
export const revalidate = 0
```

禁用数据获取缓存：Firestore的getDocs默认可能会被Next.js缓存，导致框架误判页面为静态。可以在数据获取函数中添加缓存禁用逻辑：

import { unstable_noStore as noStore } from 'next/cache'

const getArticles = async () => {
  noStore() // 强制禁用缓存，每次请求重新拉取数据
  const articles: ArticleData[] = []
  // 原有的getDocs逻辑...
}

检查全局配置冲突：打开next.config.js，确认没有设置output: 'export'——这个配置会强制所有页面静态导出，任何动态渲染配置都会失效。如果有该配置，需要移除。
验证构建日志标记：执行next build时，观察日志中首页的渲染标识：
- ○ 代表静态渲染（SSG/ISR）
- λ 代表动态渲染（SSR）
  如果首页还是○，说明配置未生效，再回头检查前面的步骤是否执行到位。
使用fetchCache配置（13.4+）：如果已经升级到13.4及以上版本，可以添加页面级的fetchCache配置，强制禁用缓存：
```
export const fetchCache = 'force-no-store'
```