Next.jsでgetServerSidePropsの実行を初回のみにする

Next.jsでgetServerSidePropsを実装した際、想定とは違うタイミングで実行され問題が発生したため、初回アクセス時のみに実行されるよう実装を進めました。

前提環境

• next.js@14.0.3
• Storeとしてreduxを利用
  • APIで取得したデータはReduxに溜めて再利用
• React + 自前SSRで構築された環境のNext.js移行のため、Reduxの廃止などはすぐにはできない

getServerSidePropsはページ遷移時に必ず呼ばれる

Next.jsでPagesRouter＋getServerSicePropsを利用する場合、以下のように実行されます。

• 各ページに定義したgetServerSidePropsがページリクエスト時に呼ばれる
• そこでAPIリクエスト等でデータを取得
• データをpropsとして返却し、ページの描画を行う

ただしこのgetServerSidePropsは初回アクセスやリロード時にのみ実行されるものではなく、その後ページ内リンクを踏んでSPAで遷移した際にも毎回実行されてしまいます。

当初の想定としては初回アクセスにのみ実行される想定だったためgetServerSidePropsにAPIリクエスト＋Redux格納の処理を記述していたのですが、毎回実行されてしまえばその都度APIリクエストが走ってしまい無駄な処理になってしまいます。

そこで以下のように実装し、初回のみにAPIリクエストが実行されるようにしました。

export const getServerSideProps: GetServerSideProps = async (context) => {
  const isFirstServerCall = context.req?.url?.indexOf('/_next/data/') === -1
  
  if (isFirstServerCall) {
    await dispatch(fetchData())
  }
  
  return return {
    // フロントのReduxStoreからデータ取得して描画するため空で返す
    props: {}
  }
}

参考ページ