追記: 2021年6月8日

SWR公式日本語訳ページが追加されたので、そちらをご覧ください

このページは Usage with Next.js – SWRの日本語訳です
SWR日本語訳全体についてはSWR 日本語訳をご覧ください

クライアントサイドデータフェッチ

ページに頻繁に更新されるデータが含まれていて、データを事前にレンダリングする必要がない場合、SWRは最適であり、特別な設定は必要ありません。useSWR をインポートし、データを使用するコンポーネント内でフックを使用するだけです。

仕組みは次のとおりです。

まず、データのないページをすぐに表示します。データのロード状態を表示できます。
次に、クライアント側でデータをフェッチし、準備ができたら表示します。

このアプローチは、ユーザーのダッシュボードページに適しています。たとえば、ダッシュボードはプライベートでユーザー固有のページであるため、SEOは関係なく、ページを事前にレンダリングする必要はありません。データは頻繁に更新されるため、リクエスト時のデータフェッチが必要です。

プリレンダリング

ページを事前にレンダリングする必要がある場合、Next.jsは次の2つの形式のプリレンダリングをサポートします。
静的生成（SSG）およびサーバーサイドレンダリング（SSR）。

SWRと一緒にSEOのページを事前にレンダリングできます。また、キャッシュ、再検証、フォーカストラッキング、クライアントサイドでの間隔での再フェッチなどの機能もあります。

プリフェッチされたデータを初期値としてinitialDataオプションに渡すことができます。たとえば、getStaticPropsと一緒に:


export async function getStaticProps() {
  // `getStaticProps`　はサーバーサイドから呼び出されます
  // 従って、この `fetcher` 関数はサーバーサイドで実行されます
  const posts = await fetcher('/api/posts')
  return { props: { posts } }
}

function Posts (props) {
  // ここの `fetcher` 関数はクライアントサイドで実行されます
  const { data } = useSWR('/api/posts', fetcher, { initialData: props.posts })

  // ...
}

ページはまだプリレンダリングされています。つまり、SEOに対応しており、キャッシュして非常に高速にアクセスできます。また、ハイドレーション後はクライアントサイドのSWRが完全なる力を発揮します。つまり、データは動的であり、時間とユーザーの操作によって更新されます。

💡 上記の例では、fetcher はクライアントとサーバーの両方からデータをロードするために使用されており、両方の環境をサポートする必要があります。しかし、これは必須ではありません。サーバーまたはクライアントからデータをロードするには、さまざまな方法を使用できます。