Next.js 14：通过Fetch API缓存实现高效数据获取

路由处理程序与服务器组件

在 Next.js 应用程序的 app 目录中，页面文件 page.tsx 默认被定义为 服务器组件。这些组件构建在相同的基础架构之上，为开发者提供了强大的功能支持。

在以往的版本中，开发者通常会在 pages 目录中使用 getStaticProps 和 getServerSideProps 等方法来实现服务器端数据获取。而在最新版本中，这些方法的使用方式依然保持相似，旨在提升开发者的易用性和熟悉度。

以下是一个快速示例，展示如何在 app/page.tsx 中创建一个简单页面并获取数据。由于这是一个服务器组件，数据获取的方式如下所示：

数据缓存的使用

在 fetch 函数中，新增了一个名为 cache 的可选参数，用于控制数据缓存行为。其中，force-cache 是服务器组件中的默认值。

// 'force-cache' 是默认值，可以省略
fetch('https://...', { cache: 'force-cache' })

如果希望避免缓存数据，可以将 cache 参数设置为 no-store，确保每次重新加载页面时都能获取最新数据。

fetch('https://...', { cache: 'no-store' })

通过这种方式，开发者可以灵活地控制数据的缓存策略，从而满足不同场景的需求。

数据重新验证

重新验证功能类似于以往的增量静态生成（Incremental Static Regeneration）。通过设置一个以秒为单位的时间间隔，缓存数据将在指定的时间内保持有效，并在页面刷新时自动更新数据。这对于动态数据的管理场景非常有用。

以下是一个示例，展示如何设置重新验证时间为每小时刷新一次：

// 每小时重新验证一次
fetch('https://...', { next: { revalidate: 3600 } })

这种机制不仅可以提高页面加载速度，还能确保数据的实时性，为用户提供更好的体验。

总结

本文探讨了 Next.js 中的数据缓存机制及其在提升性能和用户体验方面的重要作用。我们详细介绍了服务器组件中的默认缓存行为，以及如何通过 fetch 函数的参数设置来实现数据缓存和重新验证。

通过合理地使用这些技术，开发者可以显著提升页面加载速度，并为用户提供更加流畅的交互体验。无论是静态数据还是动态数据场景，这些功能都能为开发者提供强大的支持。

原文链接: https://imhardikdesai.medium.com/next-js-14-efficient-data-fetching-with-fetch-api-caching-2f917750ece1