Next.js page.tsx中export force-dynamic无法实现动态渲染问题

先从这些地方排查：

• 确认页面位置：必须放在app目录下的/reports/income-statement/page.js（或.tsx）中，Pages Router和App Router的渲染规则逻辑不同，别放错目录。
• 强制fetch不缓存：哪怕没指定cache参数，部分场景下响应仍会被缓存。直接在fetch请求里添加cache: 'no-store'，确保每次都从服务器拉取最新数据：

  fetch('/api/your-data-source', { cache: 'no-store' })
  

• 检查全局配置：查看next.config.js里是否开启了experimental.appDir（13.4.x版本默认已开启，但建议确认）；另外如果页面里存在generateStaticParams函数，哪怕没有路由slug，它也会触发静态生成，直接删掉这个函数。
• 用生产环境验证：next dev模式默认是动态渲染，无法体现真实问题。运行next build && next start后再访问页面，才能准确判断渲染状态。如果部署在Vercel，检查项目设置里的CDN缓存规则，避免覆盖你的动态配置。
• 清理遗留代码：如果是从Pages Router迁移过来的，别保留generateStaticProps这类旧函数，App Router不支持它，还可能干扰渲染模式判断。

最稳妥的动态渲染配置 #

在page.js文件顶部同时添加以下两行：

export const dynamic = "force-dynamic";
export const revalidate = 0;

再配合fetch请求的cache: 'no-store'设置，基本能强制页面每次访问都走服务器动态渲染。

验证生效的方法 #

在页面组件里添加一个服务器端生成的时间戳：

export default async function IncomeStatementPage() {
  const serverTime = new Date().toISOString();
  return <p>当前服务器时间：{serverTime}</p>;
}

刷新页面如果时间戳每次都变化，说明动态渲染已生效。也可以查看服务器日志，每次访问都有新的函数调用记录，就代表配置成功。

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