SWR 是什麼

SWR 是用來請求數據的 React Hooks library。

SWR 這個名字來自於 「stale-while-revalidate」，
他是一種會先從緩存中返回（過期的）數據，同時發送 fetch 請求重新驗證，在得到最新數據後更新頁面的做法。
是一種 HTTP RFC 5861 推廣的 HTTP 緩存失效策略。

也就是說，使用 SWR，就可以不用在數據流和響應速度間進行 trade off，
可以在 UI 一直保持快速響應的狀態下，不斷自動取得最新數據。

Syntax

import useSWR from 'swr'

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

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}

---

基本流程：

1. Install
2. Create fetcher
3. Import useSWR inside components

Install

yarn add swr

Create fetcher

const fetcher = (...args) => fetch(...args).then((res) => res.json())

或是使用其他 fetch工具。

Import useSWR inside components

import useSWR from "swr";

function Profile() {
  const { data, error } = useSWR("/api/user/123", fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>

  // 渲染数据
  return <div>hello {data.name}!</div>
}

原始資料： 用于数据请求的 React Hooks 库 – SWR