投稿日:2022/11/01 最終更新日:2022/11/01
【Next.js】5分でわかるSSGとSSR
これを読めば5分でSSGとSSRとはなにか理解が出来ます。
簡潔に説明をしていますので、さらっと見てみてください。
Next.jsのレンダリング
Next.jsはクライアントサイドのJavaScriptでHTMLを事前に生成します。
これをpre-rendering（プリレンダリング）といいます。
プリレンダリングは、従来のReactのデメリットであったGoogleのクローラには検知されにくいといった問題点に対して、ブラウザへの初期表示速度の向上や、HTMLを描画したページを初期表示するためにSEOの向上が期待できます。
そのプレレンダリングの方法の中に、SSGとSSRが含まれています。
つまり、Next.jsによる事前に行うレンダリング方法のことなんですね。
SSG（静的サイト生成）
プリレンダリング、つまり事前生成はビルド時に行います。
ビルドというのはcreate-nexta-appなどで作成した開発環境から公開用フォルダーを作成する「npm run build」を走らせた時のことです。
特に設定をすることなくCDNにキャッシュされるため、リクエスト毎にページをレンダリングする従来の方法よりも表示速度が高速になります。
このSSGはNext.jsの公式が使用を推奨しています。
肝は表示する内容が見る人によって変わらないものを表示する際に使用するといいです。
もし、仮にAさんには①の内容、Bさんには②の内容など人によって表示内容を変えたい場合はSSGだと出来ません。
その場合はSSRを使用します。
SSR（サーバーサイドレンダリング）
プリレンダリングはユーザーのリクエスト毎に行います。
つまり、ユーザーがページを見たときにプリレンダリングをするよということです。
SSRの場合、速度は低下しますが常に最新の状態でプリレンダリングされたページを表示させることが出来ます。
見る人によってプリレンダリングの表示内容を変えたい場合はサーバーとの通信を都度行う必要がありますので、SSRを使用するといいです。
ただし、個人サーバーなどでSSRを使用することは現状できませんので、その場合はVercel（Next.js開発元）にデプロイをする必要があります。
※SSGの場合はビルド時に出力することが出来ます
npm run build時にgetServerSideProps` can not be exportedエラーが表示されるときの解決法
↑ 上記ページにて出力方法が載っています
まとめ
SSGとSSRとは
- Next.jsによる事前に行うレンダリング方法
SSG（静的サイト生成）
- プリレンダリングはビルド時
- 表示速度が高速になる
- 表示する内容が見る人によって変わらないものを表示する際に使用
SSR（サーバーサイドレンダリング）
- プリレンダリングはユーザーのリクエスト時
- 速度は低下するが常に最新の状態でプリレンダリングされたページを表示させる
- ただ、Vercelにデプロイをする必要がある
ざっくりと理解出来たでしょうか？
他にもエラーの解決法も紹介していますので、ぜひ他の記事もチェックしてみてください！
