SWR とは何ですか? Next.js でどのように使用しますか?
SWR (state-while-revalidate) は、Vercel によって構築されたデータ取得方法です。最初にデータをフェッチし、フェッチ要求を送信してデータを再検証し、更新されたデータを返します。
SWR は、再利用可能なデータ フェッチを可能にするだけでなく、キャッシング、ページネーション、およびフォーカス時の再検証が組み込まれているため、非常に強力です。SWR を使用すると、Web サイトはバックグラウンドで最新のコンテンツをフェッチしながら、キャッシュされたコンテンツを表示します。
SWRはどのように機能しますか?
通常、Axios または fetch メソッドを使用してデータをフェッチします。これらのメソッドは、データ リソースに接続し、データを取得して返し、接続を閉じます。ただし、SWR は異なる方法でデータを取得します。次の 3 つの手順で機能します。
- キャッシュから古いデータを返します。
- fetch リクエストを送信してデータを再検証します。
- 最新のデータを返します。
SWR は、フェッチ API の代替ではありません。代わりに、ユーザーがサイトにアクセスするとすぐにキャッシュされたコンテンツをサイトに表示し、古くなったときにそのコンテンツを更新できます。
では、キャッシュが無効であることを SWR はどのように判断するのでしょうか? キャッシュ制御ヘッダー応答を介して。応答には、フレッシュと古いという 2 つの状態があります。新しい状態はキャッシュを再利用できることを意味し、古い状態はキャッシュが無効であることを意味します。max-age ディレクティブで、応答が有効である時間を指定します。
SWR は、max-age より古いキャッシュされた応答を無効と見なします。アプリが古いキャッシュ データをレンダリングした後、SWR はそれを再検証し、ページの更新に使用できる新しいデータを返します。
SWR を使用して Next.js でデータをフェッチする方法
最初にパッケージ マネージャー経由で SWR をインストールして、React で SWR の使用を開始します。このコマンドは npm を使用します。
npm install swr\n
コンポーネント ファイルで、swr から useSWR フックをインポートします。
import useSWR from "swr"\n
useSWR フックは 2 つの引数を受け入れます。
- データの一意の識別子。通常は API URL。
- フェッチャー関数。これは、データを取得するために使用される関数です。fetch、Axios、またはその他のデータ フェッチ ツールを使用できます。
フックは、データとエラー オブジェクトを返します。このフックは、ベスト プラクティスに従って使用してください。
useSWR フックの使用方法を示す例を次に示します。
const fetcher = (...args) => fetch(...args).then(res => res.json());\nconst {data, error} = useSWR("/api/data", fetcher);\n
次のように、コンポーネントでデータをレンダリングできます。
import useSWR from "swr"\nfunction Home () {\n const fetcher = (...args) => fetch(...args).then(res => res.json());\n const {data, error} = useSWR("/api/data", fetcher);\n if (error) return <div>failed to load</div>\n if (!data) return <div>loading...</div>\n return <div>{data}</div>\n}\n
これは SWR の単純な実装です。SWRのドキュメントでさらに詳しく説明されているので、それらをチェックして詳細を確認してください。
SWR を使用する理由
SWR には、他のデータ取得方法よりも多くの利点があります。
キャッシング
従来のデータ フェッチ方法では、アプリがデータをフェッチするときのユーザー エクスペリエンスを向上させるために、スピナーまたは読み込みメッセージを使用する必要があります。
SWR を使用すると、再検証中に古いデータをユーザーに表示できます。これは、ユーザーがフェッチャーがデータを返すのを待つ必要がないことを意味します。
再検証
再検証により、SWR はキャッシュされたデータを再び新鮮にし、ページは最新のデータで再レンダリングされます。再検証は、コンテンツが定期的に変更されるサイトにとって特に重要です。
ページネーション
SWRのuseSWRInfinite フックを使用すると、ページネーションを簡単に実装したり、無限ローディング UI を作成したりできます。
スクロール位置の回復
SWR を使用すると、ユーザーはページのスクロール位置に戻ったときにその位置に戻ることができます。これにより、ユーザー エクスペリエンスが向上します。
依存データの取得
他のデータに依存するデータを取得できます。あるリクエストから返されたデータを別のリクエストで使用できます。
SWR を使用してユーザビリティを向上させる
SWR は、自動再検証機能を備えたデータ取得ツールであり、アプリケーションが最新のコンテンツを待っている間にキャッシュされたコンテンツをレンダリングするのに役立ちます。ユーザーは、サーバーでデータが返されるのを待つのではなく、すぐにコンテンツにアクセスできます。
SWR は、ページネーション、無限ローディング、スクロール位置回復、およびその他の複雑な機能の作成にも役立ちます。定期的な更新が必要なデータをフェッチしている場合は、それを使用することを検討する必要があります。
コメントを残す