[日本語訳]SWR ドキュメンテーション プリフェッチ
追記: 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でのページのプリフェッチなどの手法と組み合わせることで、次のページとデータの両方を即座に読み込むことができます。
Author And Source
この問題について([日本語訳]SWR ドキュメンテーション プリフェッチ), 我々は、より多くの情報をここで見つけました https://qiita.com/tk1024/items/6c48e0a1a54beee21511著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .