Next.js 中的缓存不仅仅是为了节省时间，还在于减少冗余网络请求、保持数据新鲜并使您的应用程序像摇滚明星一样运行。
无论您是想将数据缓存更长时间还是按需刷新，Next.js 都能为您提供所需的所有工具。在本文中，我们将详细介绍如何在 Next.js 中有效地使用缓存

Next.js 扩展了 fetch API，为您提供缓存方面的超能力。使用 cache: 'no-store' 和 cache: 'force-cache' 等简单的获取选项，您可以轻松控制数据缓存的时间和方式。

始终保持新鲜缓存：'no-store'（相当于unstable_noStore()）

每次都想要新鲜数据吗？ cache: 'no-store' 是可以使用的。此获取选项完全跳过缓存并在每次请求时获取最新数据。当您需要实时准确性时，它是完美的 - 不允许昨天提取的剩余内容。

注意：如果您想跳过服务器组件上的缓存，还可以使用unstable_noStore()。语法稍后可能会更改，因此请坚持使用 cache: 'no-store' 以确保稳定性。

通过缓存重用数据：'force-cache'（相当于unstable_cache()）

另一方面，如果您可以使用缓存数据（考虑不经常更改的静态内容），请使用 cache: 'force-cache'。它将保存响应以供将来使用并跳过冗余的网络请求。

注意：unstable_cache() 也会缓存数据，但如果您要避免将来发生意外，使用稳定的 cache: 'force-cache' 会更可靠。

通过重新验证保持新鲜感

有时缓存的数据需要刷新——无论是在特定时间之后还是由事件触发时。幸运的是，Next.js 允许您通过多种方式重新验证缓存的数据。

使用时间重新验证：next.revalidate

如果您的数据需要定期刷新（例如每小时或每天），您可以使用提取请求中的 next.revalidate 选项设置重新验证期。它将在您指定的时间后获取最新数据，同时在其余时间保留缓存内容。

fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }  // Revalidate data every hour (3600 seconds)
});

带标签的按需重新验证：revalidateTag()

现在，想象一下，您可以告诉 Next.js 在发生重要事件（例如表单提交或新博客文章上线）时刷新缓存数据的特定位。您可以为缓存的数据分配标签，然后在需要时重新验证这些标签。

这样，您可以根据需要手动刷新部分缓存，而无需等待下一次计划的重新验证。

使用不稳定的方法

如果您是喜欢冒险的人，您还可以直接在服务器组件上使用 unstable_noStore() 和 unstable_cache() 方法来管理缓存行为。请记住，这些“不稳定”是有原因的，因此它们将来可能会发生变化（或者在您阅读时可能已发生变化）。

或者，如果您热衷于缓存，请按以下方法使用 stable_cache()：

跳过支柱钻孔

这里有一个巧妙的技巧：如果您要跨多个组件（例如布局、页面和一些内部组件）获取相同的数据，请不要强调在顶部获取一次并将其向下传递或必须在多个组件上多次请求该数据会导致性能下降。 Next.js 在服务器渲染期间自动记住获取请求，这意味着如果您多次获取相同的数据，它足够智能，只需访问网络一次并在多个组件中共享结果。

总结一下

Next.js 为您提供了有效管理缓存所需的所有工具，无论是通过 fetch API 选项，如 cache: 'no-store' 和 cache: 'force-cache'，或者更具实验性的unstable_noStore() 和unstable_cache() 方法。添加 next.revalidate 和 revalidateTag 等重新验证策略，您就拥有了保持数据新鲜所需的一切。

来源：
Next.js 缓存