Next.js 13.5.6 App Router中fetch no-store仍在构建时请求的原因

这是因为Next.js 13.5+版本对App Router的静态/动态渲染判断逻辑做了调整，核心是自动静态优化的优先级提升，具体细节如下：

1. 13.0.0 vs 13.5.6的行为差异 #

• 在Next.js 13.0.0刚推出App Router时，fetch配置cache: 'no-store'会直接将路由标记为动态渲染，构建阶段完全跳过数据获取，只在用户请求时执行。
• 但13.5.6版本开始，Next.js引入了更智能的自动静态检测：如果路由组件没有依赖任何用户请求专属信息（比如请求头headers、Cookie、URL查询参数searchParams等），即使fetch设置了cache: 'no-store'，Next.js依然会认为这个路由可以被静态预渲染，于是在构建阶段执行数据获取逻辑，生成静态页面。

2. 为什么export const dynamic = 'force-dynamic'能解决问题 #

这个配置会强制路由进入动态渲染模式，完全跳过Next.js的自动静态检测逻辑，不管有没有用户专属依赖，都会在每个用户请求时才执行数据获取，自然不会在构建阶段触发fetch和console.log。

3. 额外验证点 #

如果你的组件中加入任何动态依赖，比如：

import { headers } from 'next/headers';

export default async function Home() {
  const headersList = await headers(); // 引入请求头依赖
  const posts = await getPosts();
  return <h1>The Starting Page</h1>;
}

即使不设置dynamic: 'force-dynamic'，Next.js也会识别到这是动态路由，不会在构建阶段执行fetch，因为请求头只能在用户请求时获取，无法提前预渲染。

你的示例代码中，组件没有任何动态依赖，所以13.5.6的自动静态优化逻辑生效，导致构建阶段执行了数据获取。

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