nextjs 如何实现tabs切换，tab内容不重新加载

[leo-lucky-hub]

请问nextjs 如何实现tabs切换，tab内容不重新加载，类似vue 的keep -alive的功能

[cgfeel]

NextJS 基本可以不用考虑内容重新加载的问题，以 URL 链接的方式直接打开 Tab 均不会重新加载数据，包括在以下情况下：

1. SSG
2. SSR: page store，fetch default
3. SSR: page store, fetch dynamic
4. SSR: page dynamic, fetch default
5. ISR: 过期之前请参考上述 SSR 2 - 4 部分
6. ISR: 过期后，且首次访问（因为来回切换后不再请求而使用缓存）

在以下几种情况会重新加载内容：

1. SSR: page dynamic, fetch dynamic
2. ISR: 长时间停留在 Tab 页面下，且时长大于过期时间切换 Tab
3. ISR：过期时间非常短，例如：缓存 5 秒，用户离开页面前就已经过期了
4. CSR: 本地请求

针对上述 4 种情况，先说客户端 CSR 解决方案：

• 使用状态机，例如：Zustand、Redux、Jotai，React 默认的 context 也可以
• 将首次请求的数据 store，不刷新页面自然不会重复加载

主要说下服务端的解决方案，这样剩下 2 个情况访问 NextJS 页面会重新加载数据，即：

1. SSR: page dynamic (default), fetch dynamic
2. ISR: 长时间停留在 Tab 页面下，或过期时间非常短

先说 SSR 解决方法如下：

• 将实时更新的 SSR 页面，去掉 dynamic fetch，默认情况下 NextJS 会在编译时缓存你的 fetch，后续访问不再请求

这个方法仅限 NextJS 15 发行版之前，因为 NextJS 15 之后 fetch 缓存机制修改了

那这样就会留下一个问题：

• 页面数据不会更新了，永远都是缓存了

解决办法：

• 使用 ISR 自动更新，但这还会存在问题，稍后总结 ISR 一起说
• 使用手动更新，通过：revalidateTag、revalidatePath

手动更新什么时候更新呢？

• 根据操作触发响应，例如：订单列表的 Tab，根据用户提交订单时手动刷新
• 统一的公共页面，例如：公告 Tab，且假定发公告和公告展示不是一个平台，那么请保留一个 URL Action hook，类似 Github 的 action hook

这样就剩下一个问题了 ISR，先说上面 SSR 通过 ISR 来作为定时刷新可不可行

• 答案是可行，这种模式下可以在网页到期后首次访问请求数据，再次访问使用缓存
• 问题：如果 Tab 页用户停留时长大于缓存时长，那么切换 Tab 就会有一个加载动作

对于要求没有那么严格来说 ISR 基本满足要求，对于条件苛刻的情况，建议改为上述 SSR 解决方案，手动刷新缓存

最后剩下一个 PPR 模式，请参考上述情况，分析 PPR 页面下 Suspense 包含的页面都是什么模式，根据上述进行优化