Next.js SWR (Stale While Revalidate) 介绍

State While Revalidate是由 Zeit 创建的用于远程数据获取的 React Hooks 库。它用于

从缓存中返回数据（陈旧）
发送获取请求（重新验证），然后
再次附带最新数据。

谷歌谈到 SWR 的概念：

“It helps developers balance between immediacy—loading cached content right away—and freshness—ensuring updates to the cached content are used in the future. If you maintain a third-party web service or library that updates on a regular schedule, or your first-party assets tend to have short lifetimes, then stale-while-revalidate may be a useful addition to your existing caching policies.”

编程需要懂一点英语

包含 stale-while-revalidate 的 Cache-Control 响应标头也应该包含 max-age，并且通过 max-age 指定的秒数决定了陈旧性。任何比 max-age 更新的缓存响应都被认为是新鲜的，而旧的缓存响应是陈旧的。简而言之，一旦从缓存中呈现数据，SWR 就会自动重新验证来自源的数据，这将更快地呈现页面，并且在呈现页面后，数据会更新为最新的数据。

SWR 的优点：除了自定义 API 调用和 REST API 集成之外，Zeit 的 SWR 附带的内容如下所述。

焦点重新验证：当您重新聚焦页面或在浏览器中的选项卡之间切换时，SWR 会自动重新验证数据。
快速导航：一旦从缓存中呈现数据，SWR 就会自动重新验证来自源的数据。
Refetch on Interval ：SWR 将为您提供自动获取数据的选项，其中预取只会发生在屏幕上与挂钩关联的组件。
Local Mutation ：将更改应用于本地数据，即始终更新为最新数据。
Dependent Fetching ：SWR 允许您获取依赖于其他数据的数据。它确保了最大可能的并行性（避免瀑布），以及在下一个数据需要一段动态数据时进行串行获取，获取发生。
可扩展性：SWR 可扩展性非常好，因为它只需要很少的努力就可以编写自动并最终收敛到最新远程数据的应用程序。

SWR的缺点：

使用 SWR 的一个主要缺点是它可能会导致用户查看过时的数据，这可能是由于缺乏正确的 API 实现、更新显示信息时出错以及可能的许多其他原因而发生的。
除了造成糟糕的用户体验之外，这也可能是公司受挫的唯一原因！想象一下，一家在金融领域成熟的公司，他们能负担得起让用户查看陈旧数据的费用吗！？不，这就是为什么需要准确实施和使用 SWR。

Next.js 简介：

Next.js 是一个基于反应的框架。它基于 react、 webpack和 babel。它以其自动代码拆分、热代码重新加载（即在更改保存后立即重新加载）以及最重要的服务器端渲染而闻名。这将这个框架置于 React 文档中建议的推荐工具链之上。

设置你的next.js项目所采取的步骤，假设他们的设备上安装了 node 和 npm。

第 1 步：通过运行以下命令检查节点和 npm 版本
```
$node -v && npm -v
```
第二步：创建一个目录，在终端到达目标目录后执行
```
$ npm install --save next react react-dom
```
第 3 步：在 pages 文件夹（基本上是 pages/index.js）中的index.js中创建一个文件，添加以下代码，然后运行 npm start 来查看它的效果！

javascript

// The code for pages/index.js
  
import React from'react'; 
import Link from'next/link';
  
export default class extends React.Component { 
    render() { 
        return ( { 
         
            Hello Geeks 
         
        ) 
    }   
}

javascript

// The code for /pages/index.js
  
/* Install by using the CLI - npm i swr */
import useSWR from 'swr'; 
  
import fetch from '../libs/fetch';
  
function StateNameAN () {
  const { data, error } = useSWR(
'https://gist.githubusercontent.com/shubhamjain/35ed77154f577295707a/raw/7bc2a915cff003fb1f8ff49c6890576eee4f2f10/IndianStates.json', fetch);
  /* In case API fails */
  if (error) return failed to load 
  
  /* While result API loads */
  if (!data) return loading... 
    
  /* After response from the API is received */
  return Hello{' '}{data.AN}! 
}
  
export default function IndexPage() {
  return (
    
      
    
  );
}

javascript

// The code for /libs/fetch.js
  
/* Install by using the CLI - npm i isomorphic-unfetch */
import fetch from 'isomorphic-unfetch'; 
  
export default async function (...args) {
  const res = await fetch(...args)
  return res.json()
}

使用 Next.js 和 SWR 来获取 API：

我们将使用强大的Next.js使用 SWR 和 isomorphic-unfetch 执行数据提取，这两个依赖项需要安装（代码中给出的命令）。

javascript

// The code for /pages/index.js
  
/* Install by using the CLI - npm i swr */
import useSWR from 'swr'; 
  
import fetch from '../libs/fetch';
  
function StateNameAN () {
  const { data, error } = useSWR(
'https://gist.githubusercontent.com/shubhamjain/35ed77154f577295707a/raw/7bc2a915cff003fb1f8ff49c6890576eee4f2f10/IndianStates.json', fetch);
  /* In case API fails */
  if (error) return failed to load 
  
  /* While result API loads */
  if (!data) return loading... 
    
  /* After response from the API is received */
  return Hello{' '}{data.AN}! 
}
  
export default function IndexPage() {
  return (
    
      
    
  );
}

javascript

// The code for /libs/fetch.js
  
/* Install by using the CLI - npm i isomorphic-unfetch */
import fetch from 'isomorphic-unfetch'; 
  
export default async function (...args) {
  const res = await fetch(...args)
  return res.json()
}

输出：

Hello Andaman and Nicobar Islands!