自動再検証

フォーカス時の再検証

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

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

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

一定間隔での再検証

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

SWRには、データを自動的に再フェッチするオプションがあります。これは**スマート**であり、再フェッチは、フックに関連付けられたコンポーネントが**画面上にある**場合にのみ発生することを意味します。

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

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

refreshWhenHidden や refreshWhenOffline などのオプションもあります。どちらもデフォルトでは無効になっているため、Webページが画面に表示されていない場合、またはネットワーク接続がない場合、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
})
 
// equivalent to
useSWRImmutable(key, fetcher)

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

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

マウント時の再検証

マウント時にSWRの再検証を強制的にオーバーライドすると便利です。デフォルトでは、revalidateOnMount の値は未定義に設定されています。

SWRフックは次のようにマウントされます

• 最初に、revalidateOnMount が定義されているかどうかを確認します。trueであればリクエストを開始し、falseであれば停止します。

マウント時の動作を制御するには、revalidateIfStale が役立ちます。デフォルトでは、revalidateIfStale はtrueに設定されています。

revalidateIfStale がtrueに設定されている場合、キャッシュデータがある場合にのみ再フェッチし、そうでない場合は再フェッチしません。