Skip to content
ドキュメント
Next.js の SSG と SSR

Next.js での利用

クライアント側のデータフェッチ

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

方法は以下の通りです:

  • まず、データのないページをすぐに表示します。データがないときはローディング状態を表示することができます。
  • 続いて、クライアント側でデータを取得し、準備ができたら表示します。

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

デフォルトデータで事前レンダリング

もしページを事前レンダリングする必要がある場合、 Next.js は二つの形式の事前レンダリングの方法をサポートしています: Static Generation (SSG)Server-side Rendering (SSR)

SWR と一緒に使えば、SEO 用にページを事前レンダリングしたり、クライアント側でのキャッシュ、再検証、フォーカストラッキング、定期的な再取得などの機能を実行する事ができます。

SWRConfigfallback オプションを使うと、事前に取得したデータをすべての SWR フックの初期値として渡すことができます。 たとえば、 getStaticProps の場合:

 export async function getStaticProps () {
  // `getStaticProps` はサーバー側で実行されます
  const article = await getArticleFromAPI()
  return {
    props: {
      fallback: {
        '/api/article': article
      }
    }
  }
}

function Article() {
  // `data` は `fallback` を利用して常に利用可能です。
  const { data } = useSWR('/api/article', fetcher)
  return <h1>{data.title}</h1>
}

export default function Page({ fallback }) {
  // `SWRConfig` の範囲内の SWR フックは、設定の値を使用します。
  return (
    <SWRConfig value={{ fallback }}>
      <Article />
    </SWRConfig>
  )
}

ページはまだ事前レンダリングされています。 SEO に対応し、レスポンスが速いだけでなく、クライアント側の SWR によって完全に機能します。データは動的であり、時間の経過とともに自己更新されます。

💡

Article コンポーネントは、事前に生成されたデータを最初にレンダリングし、ページがハイドレイトされた後、最新のデータを再取得して更新を維持します。

複雑なキー

useSWRarrayfunction 型のキーで使用することができます。これらのキーでプリフェッチデータを使用するには、 fallback キーを unstable_serialize でシリアライズする必要があります。

import useSWR, { unstable_serialize } from 'swr'

export async function getStaticProps () {
  const article = await getArticleFromAPI(1)
  return {
    props: {
      fallback: {
        // unstable_serialize() に array 形式のキーを渡す
        [unstable_serialize(['api', 'article', 1])]: article,
      }
    }
  }
}

function Article() {
  // array 形式のキーを使用する。
  const { data } = useSWR(['api', 'article', 1], fetcher)
  return <h1>{data.title}</h1>
}

export default function Page({ fallback }) {
  return (
    <SWRConfig value={{ fallback }}>
      <Article />
    </SWRConfig>
  )
}
Last updated on 2022年4月17日