📝
Next.js の getServerSideProps の挙動
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つのページがあります。
-
/- 未指定
-
/nowgetServerSideProps
/now へ直接アクセス
http://localhost:3000/now にアクセスします。
返ってくる HTML は getServerSideProps の処理が実行され、取得したデータが埋め込まれています。
/ から /now へ <Link> で遷移
http://localhost:3000 にアクセスしたあと、画面のリンクをクリックします。
next/link によるクライアントサイドルーティングが走ります。
getServerSideProps はクライアントサイドルーティングでページにアクセスした場合も実行されます。
このとき getServerSideProps の実行結果は JSON で返ってきます。
getServerSideProps の効果
サンプルで動きを確認した通り getServerSideProps は以下のどちらの場合でも実行されます。
- ページへの直接アクセス
- クライアントサイドルーティングによるアクセス
つまり、該当ページのコンポーネントは getServerSidePrpos の実行結果を、サーバサイド/クライアントサイドを意識することなく props から受け取ることが出来ます。
Discussion