Next.js静态路由调用revalidatePath后返回时不显示loading.tsx求助

1. 配置缓存策略保留旧内容 #

在PromptListPage组件中导出revalidate属性，同时给数据请求添加标签化缓存策略，确保触发重新验证时，用户能先看到旧内容，后台异步更新缓存：

export default async function PromptListPage() {
  const prompts: PromptListItem[] = await fetchPromptsFromDB();
  return (
    <main>
      ...
      <div>
        <PromptList prompts={prompts} />
      </div>
    </main>
  );
}

// 配置页面重新验证规则，保留旧内容直到新内容生成
export const revalidate = 3600; // 可按需调整时长，单位秒

async function fetchPromptsFromDB() {
  const res = await fetch('/api/prompts', {
    next: {
      tags: ['prompts'], // 用标签标记数据，后续更新更精准
      revalidate: 3600
    }
  });
  if (!res.ok) throw new Error('获取Prompt列表失败');
  return res.json();
}

随后把revalidatePath("/prompts/list")替换为revalidateTag("prompts")——这样只会更新标记为prompts的数据缓存，不会清除整个页面缓存，切换回页面时会先显示旧内容，待新数据加载完成后自动更新。

2. 确保loading骨架正常显示 #

如果上述配置后仍未触发loading.tsx，可在页面组件中用Suspense显式包裹内容（补充App Router的自动加载逻辑）：

import { Suspense } from 'react';
import Loading from './loading';

export default async function PromptListPage() {
  const prompts: PromptListItem[] = await fetchPromptsFromDB();
  return (
    <Suspense fallback={<Loading />}>
      <main>
        ...
        <div>
          <PromptList prompts={prompts} />
        </div>
      </main>
    </Suspense>
  );
}

// 保留revalidate配置和带标签的fetch请求
export const revalidate = 3600;
async function fetchPromptsFromDB() { /* ... */ }

3. 验证revalidate调用环境 #

确认revalidatePath或revalidateTag是在服务器组件、服务器动作或API路由中调用的——这些方法仅支持服务器环境，客户端组件中调用会导致缓存更新逻辑失效。

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