追記: 2021年6月8日

SWR公式日本語訳ページが追加されたので、そちらをご覧ください

このページは Prefetching Data – SWRの日本語訳です
SWR日本語訳全体についてはSWR 日本語訳をご覧ください

トップレベルページデータ

SWRのデータをプリフェッチする方法はたくさんあります。トップレベルのリクエストには、rel="preload"を強くお勧めします。


<link rel="preload" href="/api/data" as="fetch" crossorigin="anonymous">

HTMLの<head>内に配置するだけです。簡単、高速、ネイティブです。

JavaScriptがダウンロードを開始する前であっても、HTMLがロードされるときにデータをプリフェッチします。同じURLを使用するすべてのincomingフェッチリクエストは、結果を再利用します（もちろん、SWRを含みます）。

プログラムでプリフェッチ

リソースを条件付きでプリロードしたい場合があります。たとえば、ユーザーがリンクにカーソルを合わせているときにデータをプリロードする際です。最も初期的な方法は、グローバルミューテーションを介してキャッシュを再フェッチして設定する関数を用意することです。


import { mutate } from 'swr'

function prefetch () {
  mutate('/api/data', fetch('/api/data').then(res => res.json()))
  // 2つ目のパラメータはPromise
  // SWRは返ってきた時に結果を使います
}

Next.jsでのページのプリフェッチなどの手法と組み合わせることで、次のページとデータの両方を即座に読み込むことができます。