📝

Next.js の getServerSideProps の挙動

2022/10/31に公開約1,300字

Next.js の getServerSideProps は、単純な Server Side Rendering (SSR) とは少し異なる挙動をします。
https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props#when-does-getserversideprops-run
この挙動を説明する機会が度々あったので簡単ではありますが、記事にしておこうと思います。
注: Next.js v12 で確認しています

準備

https://github.com/yami-beta/nextjs-get-server-side-props-sample

上記リポジトリを clone して以下のコマンドで立ち上げます。

$ yarn install
$ NODE_ENV=production yarn build
$ NODE_ENV=production yarn start

アクセス方法ごとの違い

サンプルでは //now の2つのページがあります。

  • /
    • 未指定
  • /now
    • getServerSideProps

/now へ直接アクセス

http://localhost:3000/now にアクセスします。
返ってくる HTML は getServerSideProps の処理が実行され、取得したデータが埋め込まれています。

/now へ直接アクセスした場合のデモ

/ から /now<Link> で遷移

http://localhost:3000 にアクセスしたあと、画面のリンクをクリックします。
next/link によるクライアントサイドルーティングが走ります。

getServerSideProps はクライアントサイドルーティングでページにアクセスした場合も実行されます。
このとき getServerSideProps の実行結果は JSON で返ってきます。

/now へクライアントサイドルーティングで遷移した場合のデモ

getServerSideProps の効果

サンプルで動きを確認した通り getServerSideProps は以下のどちらの場合でも実行されます。

  • ページへの直接アクセス
  • クライアントサイドルーティングによるアクセス

つまり、該当ページのコンポーネントは getServerSidePrpos の実行結果を、サーバサイド/クライアントサイドを意識することなく props から受け取ることが出来ます。

Discussion

ログインするとコメントできます