はじめに
Next.jsを勉強し始めたけど、
SSG、SSRの違いがよくわからない！！
本記事では、SSG、 SSRの違いについて分かりやすく解説しています。
Pre-rendering（プリレンダリング）とは？
SSG、SSRの前に基礎知識であるPre-renderingについて解説します。
Pre-renderingとは事前にHTMLを生成し、レンダリングすることを言います。
ReactなどのSPAアプリケーションでは、レンダリングはユーザーのページアクセス時に行われます。
一方で、Pre-renderingをしているページであれば事前に生成しているHTMLファイルを出力するので、表示速度が速くなります。図で書くとこんな感じです。
Next.jsはデフォルトで全ページに対してPre-renderingを行います。
Pre-renderingは2種類に分けられ、それが本記事のテーマである「SSG」と「SSR」です。
SSG
SSGとは？
SSGはStatic Site Generatorの略で日本語で「静的生成」です。
SSGはHTMLがアプリケーションのビルド時に1度だけ生成され、各リクエストに対して再利用されます。生成されたHTMLをユーザーに返すのでパフォーマンスが高くなります。
公式では基本的には、SSGを使用することを推奨しています。
使用例
SSGはビルド時に1度だけレンダリングを行います。そのため、ビルド後に変更する必要がないページに利用されます。
- ブログ記事
- Q&A、問い合わせページ
- 一覧画面
SSR
SSRとは？
SSRはServer Side Rendering（サーバーサイドレンダリング）の略です。
SSRはクライアントからのリクエストの度にHTMLを生成します。リクエストの度にHTMLを生成するので、SSGに比べるとパフォーマンスが悪くなります。
使用例
SSRはユーザーのリクエストによって表示内容が変わるページに使用します。
- ユーザー更新画面
- SNSのタイムライン
終わりに
本記事はここまでとなります。
ご覧いただきありがとうございました。ご指摘等がございましたら頂けますと嬉しいです。
引き続き、プログラミングについて定期的に発信していきますのでよろしくお願いします！
また、もしよろしければtwitterもフォローしていただけると嬉しいです！🐢
コメント