Next 13 app目录下如何重新触发Loading UI？

核心问题原因 #

Next.js在导航到同路由仅搜索参数变化的地址时，会复用已渲染的服务端组件实例，不会重新触发组件内的异步请求及Suspense的fallback加载状态。

解决方案 #

1. 给GameList组件添加唯一key

通过将year和month组合成组件的key，强制React在参数变化时卸载旧组件并挂载新实例，从而触发Suspense的加载UI。

修改page.tsx中的GameList渲染代码：

<Suspense fallback={<Loading />}>
  <GameList 
    key={`${year}-${month}`}
    username={params.username}
    year={year}
    month={month}
  />
</Suspense>

当year或month任意一个值变化时，key会同步更新，React会重新初始化GameList组件，执行内部的getUserGames异步请求，此时Suspense会自动显示Loading组件直到请求完成。

2. 确保API请求不被缓存

配合上述方案，需保证getUserGames中的请求不会被缓存，避免复用旧数据。在fetch请求中添加缓存配置：

// 在getUserGames函数内的fetch请求中设置
const res = await fetch(`your-api-url?year=${year}&month=${month}`, {
  cache: 'no-store', // 禁用缓存
  // 或者使用 revalidate: 0 强制每次请求都获取最新数据
  // next: { revalidate: 0 }
});

验证效果 #

调整年月选择器的跳转逻辑（无论是Link还是useRouter.push/replace），切换参数后页面会重新触发Loading组件，直到新的游戏数据加载完成。

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