Next.jsを勉強しており、使いどころをはっきりさせたかったため、まとめてみました。
getStaticProps
特徴
- ビルド時に、サーバーサイドで実行される
- いわゆるSSG（静的生成）
使いどころ
- リクエストごとにコンテンツが変わったり、頻繁にデータが更新されないもの
getServerSideProps
特徴
- SSR（サーバーサイドレンダリング）を実現し、リクエストごとにそのHTMLを生成している
- TTFB（Webページのダウンロード開始までの時間）は、getStaticPropsよりも遅くなる。
使いどころ
- リクエスト時にデータを取得・更新する必要がある場合
SWR（React Hook）
特徴
- CSR（クライアントサイドレンダリング）を実現できる
- 外部データが必要ない部分のみプリレンダリングを行い、クライアントがページにアクセスした際に、クライアント側のJavaScriptを用いて必要なデータを取得し、レンダリングする
使いどころ
- データをプリレンダリングする必要がなく、データが頻繁に更新される場合
- プライベートで、SEOに関係がないページ（ユーザーのダッシュボード等）
