そもそもなぜNext.jsは必要か
Reactだとページ数が少ない小規模開発には向いていますが、ページ数が多い大規模開発では
Next.jsが向いています。読み込み速度もnext.jsを使った方が速いです。
ですが、ReactはSPA化ができてRailsやLaravelで作ったアプリに入れることができるメリットが
あるので、Reactがダメって訳ではないです。
詳しい説明はこの後します。
プリレンダリング(Pre-rendering)
SSG、SSRの前に基礎知識であるPre-renderingについてです。
Pre-renderingとは事前にHTMLを生成し、レンダリングすることです。
Reactでは、レンダリングはユーザーのページアクセス時に行われるのでどうしても処理速度が遅くなってしまいます。
しかし、Pre-renderingをすると事前に生成しているHTMLファイルを出力するので、表示速度が速くなります。
Next.jsはデフォルトで全ページに対してPre-renderingをするみたいです。
SSGとは
SSG(Static Site Generator)は「静的生成」のことです。
アプリが完成してデプロイしよーという時に、ビルド(デプロイできるように組み合わせる)します。
SSGはビルドの時にHTMLを1度だけ生成します。
そしてユーザーから各リクエストに対して再利用でき、生成されたHTMLをユーザーに返せます。
公式では基本的には、SSGを使用することを推奨しているみたいです。
SSRとは
SSR(Server Side Rendering（サーバーサイドレンダリング）)のことです。
SSRはクライアントからのリクエストの度にHTMLを生成します。
リクエストの度にHTMLを生成するので、SSGに比べるとパフォーマンスが悪いです。
SSG,SSRの使い分け
| SSG | SSR |
|---|---|
| ブログ、ドキュメント、Qiitaなど | ユーザーの更新画面 |
| ECサイトなどの商品ページ | SNSのタイムライン |
⚫︎SSGは情報などを更新せず1回情報を取得できればOKです。
つまりビルド後に変更する必要がないページに使われます。
⚫︎SSRはユーザーの情報などを更新したります。
つまりユーザーのリクエストによって表示内容が変わるページで使われます。
資料