ドキュメント

この記事はNext.jsドキュメント内、Data Fetching Overviewの説明や自分なりに勉強したことの記録です。
間違ってたらご指摘ください！

Next.jsでのデータ取得の方法

Next.jsのデータフェッチでは、アプリケーションのユースケースに応じて、さまざまな方法でコンテンツをレンダリング※することができる。
よって、アプリケーションによってどの方法でレンダリングするのか選択する必要があります。
ブラウザからのデータ取得はどの方法とでも組み合わせ可能。

※ここでいうレンダリングはブラウザレンダリング（ブラウザへの描画）の事ではなく、
Reactのレンダリング（Reactがコンポーネントを呼び出す）のことです。
先日書いた記事：Reactのレンダリングとは

下記4つの方法が紹介されています。

方法4つ

• SSR(Server-Side Rendering)：サーバーサイドレンダリング
• SSG(Static Site Generation)：静的サイト生成
• CSR(Client Side Rendering)：クライアントサイドレンダリング
• ISR(Incremental Static Regeneration)：インクリメンタル静的生成

4つの方法は何が異なるのか

データフェッチ・ファイル生成のタイミングの違い。Next.jsでは関数が用意されている。

• SSR(Server-Side Rendering)：リクエスト時にサーバーでデータ取得＋プリレンダリング→生成ファイル返却。
• SSG(Static Site Generation)：ビルド時にデータ取得＋レンダリング、リクエスト時は生成済の静的ファイルを返される。
• CSR(Client Side Rendering)：リクエスト時にサーバーからファイル返却＋クライアント側でデータ取得。
• ISR(Incremental Static Regeneration)：SSGと同じく生成済ファイルが返される＋一定時間後にリクエストしたらページを再生成してくれる。

もう少し詳しく

SSR(サーバーサイドレンダリング)とは

データ取得とレンダリングをサーバー側で実行する。（ブラウザでは実行されない）
メリット：
サーバー側でレンダリングされるので、APIキーなどの露出が防げる。
（propsに秘密情報は含めないこと。）
デメリット：
サーバーに負荷がかかる。
サーバー側でデータ取得をするので（クライアント側でデータ取得するのと比較して）時間がかかり、インタラクティブ性が低い。
キャッシュが効かない。(stale-while-revalidateオプション有)
Vercelではlimitation制限がかかる場合がある。
使いどころ：
リクエスト時にデータ取得したい時（認証や位置情報によって取得データが変わる時など）
SEO indexが重要なサイト
使い方：
getServerSidePropsを使用。
（pageからexportすること。component内で使用できない。）

SSG(静的サイト生成)とは

ビルド時に静的ファイルを生成しておき、リクエストが来たら静的ファイルを返す。
リクエスト前にデータ取得やファイル生成がされているので速い。
メリット：
キャッシュを効かせたいとき
デメリット：
ビルド後の更新情報は反映されない。（クライアントデータ取得との組み合わせは可能。）
リアルタイムなデータが欲しい場合には不向き。
使いどころ：
headless CMSとの組み合わせ
SEO対策が必要なサイト
使い方
getStaticPropsを使用。
（pageからexportすること。component内で使用できない。）

CSR（クライアントサイドレンダリング）とは

クライアントサイドでレンダリングを実行する（サーバーサイドでは実行されない）
メリット：
最新データが反映できる。
デメリット：
クライアント側の速度に左右される。
データはキャッシュされない。（SWR使用でキャッシュなど解決できる）
SEOに強くない可能性あり（リクエスト時にサーバーから返却されたhtmlを確認すると、取得データがまだないことがわかる。）
使いどころ：
SEO indexを気にしなくて良いとき。
プリレンダリングが必要ないとき。
使い方
useEffectなど使用。（getServerSidePropsやgetStaticPropsを使用しない）

 ISR（インクリメンタル静的サイト生成）とは

SSGで静的ページ生成後に、revalidate（キャッシュを返す時間）を設定すれば、サイト全体を再ビルドせずにページごとに再生成してくれる。
revalidate後のアクセスでも先にキャッシュしたページを返す。
メリット：
SSGのページを更新できる
余分なリクエストを発生させない。（リクエストがなければ再生成されない。）
デメリット：
常に最新のデータが表示されなければならないページでは使えない。
使いどころ：
更新の入るページ
使い方
getStaticPropsにrevalidateを追加

参考

Vercel:https://vercel.com/docs/concepts/incremental-static-regeneration/overview

以上です！