Next.js 13服务端组件路由跳转后无法展示最新Fetch数据求助

问题描述 #

在Next.js 13中使用Server Component通过Fetch API获取数据渲染，但通过next/navigation路由跳转进入页面时始终显示旧数据，仅手动刷新页面才能加载新数据。已尝试在fetch中设置cache: "no-store"和next.revalidate: 1参数，问题仍存在。

原代码 #

import Post from "./Post";
import NewPostBtn from "./NewPostBtn";

async function getPosts() {
  let res = await fetch("https://xyx-default-rtdb.firebaseio.com/posts/.json", {
    cache: "no-store",
    next: {
      revalidate: 1,
    },
  });
  let posts = await res.json();
  posts = Object.values(posts);
  posts = posts.filter((post) => post != null);
  return posts;
}

const PostWall = async () => {
  console.log("Rendered PostWall");
  let posts = await getPosts();

  return (
    <div className="flex flex-wrap p-5 gap-5">
      {posts.map((post) => (
        <Post post={post} />
      ))}

      <NewPostBtn />
    </div>
  );
};

export default PostWall;

解决方案 #

1. 强制组件动态渲染（最直接有效） #

在Server Component顶部添加export const dynamic = "force-dynamic";，强制组件在每次请求（包括客户端路由跳转）时都从服务器重新获取数据并渲染，跳过客户端Router Cache。

修改后的代码：

import Post from "./Post";
import NewPostBtn from "./NewPostBtn";

// 强制组件动态渲染，禁用客户端缓存
export const dynamic = "force-dynamic";

async function getPosts() {
  let res = await fetch("https://xyx-default-rtdb.firebaseio.com/posts/.json", {
    cache: "no-store", // 保留该配置，确保fetch不缓存响应
  });
  let posts = await res.json();
  posts = Object.values(posts);
  posts = posts.filter((post) => post != null);
  return posts;
}

const PostWall = async () => {
  console.log("Rendered PostWall");
  let posts = await getPosts();

  return (
    <div className="flex flex-wrap p-5 gap-5">
      {posts.map((post) => (
        <Post post={post} />
      ))}

      <NewPostBtn />
    </div>
  );
};

export default PostWall;

2. 移除冲突的fetch配置 #

原代码中同时设置了cache: "no-store"和next.revalidate: 1，这两个配置存在冲突：

• cache: "no-store"对应完全动态渲染，不缓存任何内容
• next.revalidate对应增量静态再生（ISR），会缓存内容并定期更新

保留其中一种配置即可，推荐使用cache: "no-store"来确保每次请求都获取最新数据：

// 修改后的fetch配置
let res = await fetch("https://xyx-default-rtdb.firebaseio.com/posts/.json", {
  cache: "no-store",
});

3. 确保子组件正确响应数据更新 #

如果Post是Client Component，检查是否存在本地状态缓存，同时确保渲染时使用唯一且随数据变化的key属性，保证数据更新时子组件能重新渲染：

{posts.map((post) => (
  <Post key={post.id} post={post} /> // 使用post的唯一ID作为key
))}

原因说明 #

Next.js App Router默认会将Server Component缓存到客户端的Router Cache中，当通过next/navigation进行客户端路由跳转时，会优先读取缓存内容而非重新请求服务器。dynamic: "force-dynamic"会绕过这个缓存机制，强制每次导航都从服务器获取最新的组件渲染结果。

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