Photo by Lautaro Andreani on Unsplash
皆さん、こんにちは！連休の初日はいかがお過ごしでしたか？今日は、Webの様々なレンダリングモード、具体的にはSSG、SSR、CSR、ISRの概念について共有したいと思います。これらは似ているように見えますが、細かい部分が異なります。どれを使うか決める前に、以下の紹介を見てみましょう！
Static Site Generation (SSG)
SSG、または静的生成（Static Generation）とは、プロジェクト全体をビルドする際にHTMLファイルを生成することを意味します。これらのHTMLファイルには、表示に必要なデータがすでに含まれています。このレンダリングモードは、プリレンダリング（pre-rendering）の一種です。SSGは、すべてのデータがビルド時に取得されるため、コンテンツが変化しない静的Webサイトに非常に適しています。これらのHTMLファイルはCDNに配置してキャッシュすることで、Webサイトのパフォーマンスを向上させることができます。これに加えて、SSGレンダリングモードを採用することはSEOにも有益です。
Server-side Rendering (SSR)
SSR、またはサーバーサイドレンダリング（Server-side Rendering）とは、ブラウザ（クライアントサイド）がリクエストを送信するたびに、サーバーがHTMLファイルを生成してブラウザに送り返し、表示することを意味します。このレンダリングモードは、頻繁に変更されるデータに非常に適しています。ただし、サーバーがHTMLファイルを生成するのに時間がかかるため、Webサイトの応答時間が長くなり、ユーザーは待機中に白い画面を見ることになります。SSRもプリレンダリングの一種と見なされるため、SEOにはかなり優しいです～ ただし、この方法はサーバーが常にユーザーのリクエストを処理する必要があることに注意してください。
Client-side Rendering (CSR)
CSR、またはクライアントサイドレンダリング（Client-side Rendering）は、名前の通りほぼそのままの意味です。サーバーからブラウザに送信されるHTMLファイルは、コンテンツがないと見なすことができます。ブラウザは、サーバーからデータを取得した後にのみ画面にレンダリングできます。SPA（ReactやVueのようなSingle Page Application）で使用されるレンダリングモードはCSRです。このモードの最大の利点は、ページを切り替えるときにサーバーからファイルを再度取得する必要がないため、ユーザーに白い画面が表示されず、非常に優れたユーザー体験と見なされることです。ただし、レンダリング時間はクライアントの環境に依存します。また、このため、サーバーの負担はかなり軽減されます。
Incremental Static Regeneration (ISR)
ISR、またはインクリメンタル静的再生成（Incremental Static Regeneration）は、あまり耳にしないレンダリングモードであり、これもプリレンダリングの一種と見なされます。ISRは、プロジェクトのビルド時にすべて（または一部）のHTMLファイルを生成します。新しいリクエストがあり、所定の時間が経過している場合、サーバーは最初にブラウザに古いファイルを提供しつつ、バックグラウンドで最新のファイルを再生成し、生成が完了した後にブラウザに送信して表示します。ユーザーがまだ生成されていないページにアクセスした場合、サーバーはその場でそのファイルを生成してキャッシュするため、次にこのページにアクセスするユーザーはキャッシュから直接ファイルを取得できます。ISRはSSGとよく似ていますが、SSGがデータコンテンツを更新できないという問題を解決しており、HTMLファイルもCDNにキャッシュされるため、SSRに比べてサーバーへの負担も軽減されます。
どれを使うべきですか？
各レンダリングモードには長所と短所があり、どれを選択するかはプロジェクトによって異なります。明確な勝者はいません。
- データが常に変化し、SEOが必要ない内部システムのダッシュボードなどは、CSRの使用が非常に適しています。
- データの変更率は低くないがSEOが必要な場合は、SSRの使用を検討できます。
- イベントやマーケティングサイトのようにデータをほとんど更新する必要がなく、SEOも重要な場合は、SSGの使用が非常に適しています。
- データがあまり更新されない場合、または商品ページのようにページ数が多すぎてSEOが必要な場合は、ISRが良い選択です。
私も表を描いてみました（英語ですが XD）、見てみてください～
Next.jsでのプリレンダリング
Next.jsは、上記のレンダリングモードを組み込みでサポートしており、データを取得（fetch）する必要のないWebページをレンダリングするためにデフォルトでSSGを使用します。サーバーからデータを取得する必要がある場合は、CSRと混在（ハイブリッド）されます。他のレンダリングモードを使用したい場合は、Next.jsが提供する以下の関数を使用できます：
| Function | Description |
|---|---|
| getStaticProps (Static Generation) | ビルド時に必要なデータを取得し、HTMLファイルに埋め込みます |
| getStaticPaths (Static Generation) | ビルド時にどの動的（dynamic）ルートをHTMLファイルとして生成する必要があるかを決定します |
| getServerSideProps (Server-side Rendering) | 必要なデータを取得するためにブラウザがリクエストを送信するたびに実行される関数 |
まとめ
今日はここまでです。明日また続きをやりましょう～ 明日は、これら3つの関数を使用して、さまざまなレンダリングモードでWebサイトを実装する方法を共有します！ 今日学んだレンダリングモードについてどう思いましたか？