📝

Next.js の getServerSideProps の挙動

2022/10/31に公開

Next.js の getServerSideProps は、単純な Server Side Rendering (SSR) とは少し異なる挙動をします。

この挙動を説明する機会が度々あったので簡単ではありますが、記事にしておこうと思います。
注: Next.js v12 で確認しています

準備

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

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

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

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

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

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

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

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

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

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