Next.js 15未配置缓存却自动缓存动态页面问题咨询

问题描述 #

我将一个简单网站升级至Next.js 15.0.1版本，包含若干静态页面。但开发博客文章页面时，发现该路由被识别为静态路由，代码如下：

import SectionWrapper from "@/components/shared/section-wrapper";

export default async function BlogPage() {
  const response = await fetch("https://dummyjson.com/posts").then((res) =>
    res.json(),
  );
  const posts = response.posts;

  return (
    <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
      {posts.map((post) => (
        <div
          key={post.id}
          className="flex flex-col gap-3 rounded border bg-card p-4"
        >
          <div>
            <h2 className="text-2xl font-semibold">{post.title}</h2>
            <p className="text-sm text-muted-foreground">{post.body}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

我原以为在Server Component中使用await时，缓存是需要手动开启的？我可以通过调用await cookies();强制设为动态，但这是旧方法，我不想采用；我知道可以使用export const dynamic = ...，但我认为Next.js 15在组件中使用await时无需此配置。页面显示为Static route，构建时也提示为静态路由。

解决方案 #

Next.js 15 中，Server Component 的路由渲染策略核心取决于数据获取的缓存行为，而非单纯是否使用await：

• 默认情况下，fetch请求的缓存模式是force-cache，这意味着数据会在构建时被获取并缓存，页面因此被标记为静态路由。
• await本身只是Server Component的异步语法特性，不会自动触发动态渲染，只有当数据获取被标记为动态（即不缓存）时，页面才会变为动态路由。

要让这个博客页面变为动态路由，有两种更符合Next.js 15推荐的方式：

1. 修改fetch的缓存选项：
   在fetch中显式设置cache: 'no-store'，这样每次请求都会重新获取数据，页面会自动变为动态路由：

   const response = await fetch("https://dummyjson.com/posts", { cache: 'no-store' }).then((res) => res.json());
   

   或者如果需要按需重新验证数据，可以用next: { revalidate: 60 }（表示每60秒重新验证一次数据）：

   const response = await fetch("https://dummyjson.com/posts", { next: { revalidate: 60 } }).then((res) => res.json());
   

2. 使用export const dynamic配置：
   如果你希望整个页面强制为动态，也可以在组件文件顶部添加配置，这也是Next.js 15支持的标准方式：

   export const dynamic = 'force-dynamic';
   

简单来说，await只是让组件能异步获取数据，但Next.js会根据数据的缓存策略来决定页面是静态还是动态，这是Next.js 13+ App Router的核心逻辑，15版本延续了这个规则。

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