Next.js 13/14服务器组件返回页面时不自动重新获取数据问题

方法1：页面级禁用缓存（简单直接） #

在DjProfile服务器组件顶部添加缓存配置，强制页面每次导航进来都重新获取数据：

export const revalidate = 0; // 禁用缓存，每次请求都重新生成页面

export default async function DjProfile({ params }) {
  const tracks = await getUserLikes(params?.id);

  return (
    <Suspense fallback={<LoadingGrid />}>
      <TrackContainer tracks={tracks} />
    </Suspense>
  );
}

方法2：精准控制数据获取缓存（更灵活） #

用Next.js的unstable_cache包裹数据获取函数，指定缓存规则，确保不同用户的点赞数据按需刷新：

import { unstable_cache } from 'next/cache';

const getUserLikes = unstable_cache(
  async (userId) => {
    const likesRef = collection(db, "likes");
    const querys = query(likesRef, where("currentUser", "==", userId));
    const querySnapshot = await getDocs(querys);

    const likesData = [];
    querySnapshot.forEach((doc) => {
      const data = doc.data();
      likesData.push(data);
    });

    console.log("new likes", likesData);
    return likesData;
  },
  ['user-likes'], // 缓存标识标签
  { revalidate: 0 } // 完全禁用缓存，每次调用都重新请求
);

方法3：组件级设置无缓存 #

在组件内直接设置当前请求的缓存策略为no-store，避免复用缓存数据：

import { cache } from 'next/cache';

export default async function DjProfile({ params }) {
  cache('no-store'); // 当前请求不缓存数据
  
  const tracks = await getUserLikes(params?.id);

  return (
    <Suspense fallback={<LoadingGrid />}>
      <TrackContainer tracks={tracks} />
    </Suspense>
  );
}

问题根源 #

Next.js的Link组件用客户端路由，默认会复用服务器组件的缓存数据；而a标签触发完整页面刷新，会重新拉取所有数据。上面的方法都是通过调整缓存策略，让客户端路由导航时也能获取最新数据。

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