Next.js SWR (Stale While Revalidate) 介绍

什么是 SWR

Next.js SWR 是一种用于管理数据请求和响应的 React Hooks 库。SWR 代表 Stale-While-Revalidate（同时返回陈旧数据），它是一种用于缓解加载速度延迟的策略。

SWR 的灵感来源于 HTTP 缓存策略，其工作方式类似于 HTTP 缓存机制。在 SWR 中，我们首先从缓存中获取数据，如果该数据过期或不存在，则发送请求以获取最新的数据。在有限的等待时间后，如果我们收到了有效负载，则将其保存在缓存中以进行未来的快速访问。

SWR 可以在保持应用程序响应性的同时，通过使用预取或预加载技术来提高数据加载速度。

SWR 的优点

SWR 有以下几个优点：

• 在访问缓存时，SWR 为数据请求和响应提供了过渡状态，这有助于最小化应用程序内部的加载时间，并提供了良好的用户体验。

• SWR 允许您观察数据是否发生更改，以及它何时发生更改。它还具有可定制的重新验证策略，例如在突发活动情况下降低请求时的回退策略。

• SWR 是一种轻量级库，易于部署，并可以管理大量的并发请求。

• SWR 支持 SSR（Server-Side Rendering），同时降低了数据消耗，并有助于在客户端和服务器端之间共享数据并提高应用程序的可用性。

SWR 的常用 API

以下是 SWR 常用的 API：

• useSWR: 接受一个参数 URL，返回缓存的数据以及在最新数据已获取后重新渲染的方法。

• useSWRInfinite: 控制无限滚动式加载的数据。

• mutate: 用于向缓存中添加、更新或删除数据。

• SWRConfig: 用于传递默认的 SWR 选项

如何使用 SWR

使用 SWR 非常简单，您只需要将其安装为依赖项，然后在项目中引入即可。

npm install swr

在代码中使用 SWR：

import useSWR from 'swr';

function Profile() {
  const { data, mutate } = useSWR('/api/user', fetcher);

  if (!data) return <div>Loading...</div>;

  return (
    <>
      <div>Welcome {data.name}!</div>
      <button onClick={() => mutate({ name: 'New Name' })}>Rename</button>
    </>
  );
}

您也必须为 SWR 提供默认设置。

import { SWRConfig } from 'swr';

function MyApp({ Component, pageProps }) {
  return (
    <SWRConfig
      value={{
        refreshInterval: 10000,
        fetcher: (url) => fetch(url).then((r) => r.json()),
      }}
    >
      <Component {...pageProps} />
    </SWRConfig>
  );
}

结论

SWR 在 Next.js 中具有很多优点。它使应用程序响应速度更快，并有利于用户体验。此外，它易于使用，并将数据缓存和预取逻辑抽象出来。如果您想使用 Next.js 开发高质量的、具有较长时间保持的 Web 应用程序，那么 SWR 是一个很好的选择。