Skip to content
ドキュメント
/
自動再検証

自動再検証

💡

データを手動で再検証する場合は、ミューテーションを確認してください。

フォーカス時の再検証

ページにフォーカスを合わせるかタブを切りかえると、SWR は自動的にデータを再検証します。

これは、すぐに最新の状態に同期するのに便利です。古いモバイルタブやスリープ状態になったラップトップなどのシナリオでデータを更新する場合に役立ちます。

ビデオ:フォーカスの再検証を使用して、ページ間でログイン状態を自動的に同期します。

この機能はデフォルトで有効になっています。revalidateOnFocus オプションで無効にできます。

定期的な再検証

多くの場合、複数のデバイス、複数のユーザー、複数のタブが原因でデータが変更されます。画面上のデータを時間の経過とともに更新するにはどうすればよいのでしょうか?

SWR には、データを自動的に再フェッチするオプションがあります。その動きは非常にスマートで、フックに関連付けられているコンポーネントが画面に表示されている場合にのみ、再フェッチが行われます。

ビデオ:ユーザーが変更を加えると、両方のセッションで最終的に同じデータをレンダリングします。

refreshInterval 値を設定することで有効にできます:

useSWR('/api/todos', fetcher, { refreshInterval: 1000 })

refreshWhenHiddenrefreshWhenOffline などのオプションもあります。両方ともデフォルトで無効になっているため、ウェブページが画面に表示されていない場合、またはネットワーク接続がない場合、SWR はフェッチしません

再接続時の再検証

ユーザーがオンラインに戻ったときに再検証することも役立ちます。このシナリオは、ユーザーがコンピューターのロックを解除したときに頻繁に発生しますが、この時点ではまだインターネットは接続されていません。

データが常に最新であることを確認するために、SWR はネットワークが回復したときに自動的に再検証します。

この機能はデフォルトで有効になっています。revalidateOnReconnect オプションで無効にできます。

自動再検証の無効化

もしリソースが イミュータブル で、再検証を行っても変更されない場合は、そのリソースのすべての種類の自動再検証を無効にできます。

バージョン 1.0 以降から、 SWR はリソースをイミュータブルとして扱うヘルパーフックの useSWRImmutable を提供します:

import useSWRImmutable from 'swr/immutable'

// ...
useSWRImmutable(key, fetcher, options)

上記のフックは、通常の useSWR フックと同じAPIインターフェースを備えています。また、次の再検証オプションを無効にすることで、同じ処理を行うこともできます:

useSWR(key, fetcher, {
  revalidateIfStale: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false
})

// 上記に相当します
useSWRImmutable(key, fetcher)

revalidateIfStale は、 SWR がマウントされ、古いデータがある場合に SWR を再検証する必要があるかどうかを制御します。

上記の二つのフックは、まったく同じ処理を行います。データがキャッシュされると、二度とリクエストされなくなります。

Last updated on 2021年9月21日