LoginSignup
0

More than 1 year has passed since last update.

[日本語訳]SWR ドキュメンテーション プリフェッチ

Last updated at Posted at 2021-01-04

追記: 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でのページのプリフェッチなどの手法と組み合わせることで、次のページとデータの両方を即座に読み込むことができます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0