Zenn
🤖

Next.js + SWRでSSG or SSRとCSRを組み合わせて使用する

2022/04/29に公開
Next.js
SWR
#
SSG
#
SSR
#
csr
tech

はじめに

表題通り、Next.js + SWRでSSG or SSRとCSRを組み合わせて使用する方法について書いていこうと思います。
SEOなどのためにSSG or SSRでプリレンダリングはしておきたいが、その後はCSRでデータを更新したい、といったユースケースを想定しています。

SSG/SSR/CSRについて詳しく知りたい方はこちらの記事もご一読ください。
https://zenn.dev/a_da_chi/articles/105dac5573b2f5

TL;DR

getStaticProps or getServerSidePropsで取得した値をSWRConfigのvalueのfallbackオプションに渡すことで、dataが空である初期表示時はgetStaticProps or getServerSidePropsで取得した値にfallbackしてくれます。

実装例

export async function getStaticProps () {
  // `getStaticProps` is executed on the server side.
  const article = await getArticleFromAPI()
  return {
    props: {
      fallback: {
        '/api/article': article
      }
    }
  }
}

function Article() {
  // `data` will always be available as it's in `fallback`.
  const { data } = useSWR('/api/article', fetcher)
  return <h1>{data.title}</h1>
}

export default function Page({ fallback }) {
  // SWR hooks inside the `SWRConfig` boundary will use those values.
  return (
    <SWRConfig value={{ fallback }}>
      <Article />
    </SWRConfig>
  )
}

※こちらの実装例はSWRのドキュメントに記載されているものです。

  1. getStaticPropsで値を取得し、useSWRの第一引数に渡すkey: 取得した値の形式でfallbackオプションをPageコンポーネントに渡す
  2. PageコンポーネントでSWRConfigのvalueに受け取ったfallbackオプションを渡す
  3. useSWRの第一引数にfallbackオプションで定義したkeyを渡す

このようにすることでdataが空である初期表示時はgetStaticPropsで取得した値にfallbackしてくれます。
ここからさらに条件付きフェッチを使用することで初期表示時はgetStaticPropsで取得した値を使用し、その後はCSRで取得した値を使用することができます。

fallbackオプションで定義するkeyにarrayやfunctionを指定したい場合はunstable_serializeを使用します。

import useSWR, { unstable_serialize } from 'swr'

export async function getStaticProps () {
  const article = await getArticleFromAPI(1)
  return {
    props: {
      fallback: {
        // unstable_serialize() array style key
        [unstable_serialize(['api', 'article', 1])]: article,
      }
    }
  }
}

function Article() {
  // using an array style key.
  const { data } = useSWR(['api', 'article', 1], fetcher)
  return <h1>{data.title}</h1>
}

export default function Page({ fallback }) {
  return (
    <SWRConfig value={{ fallback }}>
      <Article />
    </SWRConfig>
  )
}

おわりに

このようにすることでNext.js + SWRでSSG or SSRとCSRを組み合わせて使用することができます。
ユースケースはそこまで多くはないかもしれませんが、お役に立てれば幸いです。

それではよいNext.jsライフを！

Discussion