前言
当我们构建一个 Next.js 应用时，我们可能需要从远程服务器获取数据。然而，大量的请求会导致应用的性能下降，因此，我们需要考虑为应用实现数据缓存来提高性能和响应速度。在本文中，我们将探讨如何在 Next.js 中实现远程请求和数据缓存。
看看 Next.js 中的 getStaticProps 函数
在 Next.js 中，我们可以使用 getStaticProps 函数来从服务器获取数据。该函数在构建时间（build time）被调用，并将通过 props 参数将获取的数据传递给页面组件。这种方法的好处是，我们只需在构建时获取数据一次，之后就可以对数据进行缓存。
下面是一个简单的使用 getStaticProps 函数的示例：
-- -------------------- ---- ------- ------ ----- -------- ---------------- - ----- --- - ----- ---------------------------------------------------- ----- ----- - ----- ----------- ------ - ------ - ------ -- -- - -------- ------- ----- -- - ------ - ---- ----------------- -- - --- ------------------------------- --- ----- -- - ------ ------- ------展开代码
如上所示，我们通过调用 fetch 函数从远程服务器获取数据，并将其传递给页面组件。这个函数在每个请求期间都会执行，并且这样的解决方案在性能方面有一些问题。
为什么我们需要数据缓存？
在上面的示例中，我们每次请求页面时都会从远程服务器获取数据，即使数据没有更改。这样做可能会对服务器造成压力，并浪费带宽和资源。因此，我们需要考虑对数据进行缓存，以便在必要时才重新获取它。
我们可以使用 Next.js 提供的一些缓存策略来实现数据缓存。在接下来的章节中，我们将了解这些缓存策略并看看如何使用它们来缓存数据。
getStaticProps 缓存策略
Next.js 提供了两种缓存策略，可以用于缓存数据。
缓存时间
第一个缓存策略是缓存时间。我们可以通过将 revalidate 属性添加到 getStaticProps 返回的对象中来指定要缓存的时间：
-- -------------------- ---- ------- ------ ----- -------- ---------------- - ----- --- - ----- ---------------------------------------------------- ----- ----- - ----- ----------- ------ - ------ - ------ -- -- -- -- -- ----------- --- -- -展开代码
在上面的示例中，我们将缓存时间设置为 10 秒钟。这意味着数据将保留在缓存中，直到 10 秒钟过去，然后它将被重新获取。
缓存键（Cache Key）
缓存键允许我们指定一个缓存键值，在下一次请求相同的缓存键时，我们将从缓存中获取数据而不是重新获取它。我们可以将 getStaticProps 函数返回的对象中的 unvalidated 选项设置为 true，并将缓存键值添加到返回的 props 对象中：
-- -------------------- ---- ------- ------ ----- -------- ---------------- - ----- --- - ----- ---------------------------------------------------- ----- ----- - ----- ----------- ------ - ------ - ------ ---------- --- --------------------- -- -- -- -- -- ----------- --- -- ---------- ------------ ----- -- -展开代码
在上面的示例中，我们向 props 对象添加了一个名为 updatedAt 的缓存键值属性。在下一次请求相同的缓存键时（即在 10 秒钟之内），我们将使用缓存数据。
客户端数据缓存
有时，我们可能需要从客户端进行数据请求。Next.js 提供了两个处理客户端请求的功能。我们将在下面的章节中了解这些功能。
SWR
SWR 是一个轻量级且易于使用的客户端数据请求库。它提供了数据请求，数据缓存和数据管理的所有功能。SWR 还具有“尽快从缓存中呈现”和“自动更新”等特性，这使得它成为 Next.js 应用的理想选择。
下面是如何在 Next.js 应用中使用 SWR 的示例：
-- -------------------- ---- ------- ------ ------ ---- ------ -------- ---------- - ----- - ----- ----- - - ------------------------ -- ------- - ------ ----------- -- ---- ----------- - -- ------- - ------ ---------------------- - ------ - ---- ------------------- -- - --- ------------------------------------ --- ----- -- - ------ ------- ---------展开代码
我们可以在 useSWR 中指定 API 端点 URL（/api/products）。SWR 会处理数据的缓存和更新，因此我们无需担心性能问题。
React Query
React Query 是一个类似于 SWR 的库，提供了相似的功能，同时还有一些其他功能，如查询重试和缓存偏差等。
下面是在 Next.js 应用中使用 React Query 的示例：
-- -------------------- ---- ------- ------ - -------- - ---- -------------- -------- ---------- - ----- - ----- ------ -------- --------- - - -------------------- --------------- -- --------- - ------ ----------- -- ---- ----------- - -- ----------- - ------ ---------------------- - ------ - ---- ------------------- -- - --- ------------------------------------ --- ----- -- - ------ ------- ---------展开代码
如上所述，我们可以使用 useQuery hook，并指定查询的名称和要使用的函数（fetchProducts）。React Query 会在需要时保留数据，并自动更新数据。
结论
在本文中，我们了解了如何在 Next.js 中实现远程请求和数据缓存。我们看到了不同的缓存策略，如缓存时间和缓存键。我们还了解了两个处理客户端请求的库：SWR 和 React Query。
对于需要构建 Next.js 应用程序的开发人员来说，这些技术是至关重要的。数据缓存和优化可以大大提高应用程序的性能和响应速度，并更好地满足用户需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6720792e2e7021665e0261c1
