跳至主要内容

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