🎢
SPA・SSR・SSG・CSR・ISRについての理解
実務歴1年で現在就職活動中のものです。
先日エンジニア面接を受けた際に下記のような事が起きました。
面接官👨
「SSR・SSG・CSR・ISRについて説明してください。」
僕👦
「え〜と、SSRは〜で〜、、、、😨」
と、とっさに説明するとなると、うまく説明できなく、理解できている風だったという事に気づいたので、反省の思いもこめて、アウトプットしようと思います。
せっかくなのでSPAの説明も記述します。
これから紹介する5つは「レンダリング方式 (Rendering Mode)」または「レンダリング戦略 (Rendering Strategy)」と呼ばれます。
これらは、Webサイトやアプリケーションのレンダリング方法や、ページをどのように生成するかなどを決定するための異なる戦略やアプローチです。
SPA
SPAとは
- 一つのHTMLページにJavaScriptを使って動的にコンテンツを更新することで、ページ遷移をせずにユーザーインタフェースを構築するアプローチ方法
- 初めに必要なJavaScriptやCSS、画像などの静的ファイルを読み込み、以降はAjax等の技術を使用して必要に応じて動的にデータを取得し、ブラウザ上でページを更新する。
- 画面遷移が行われないため、画面の更新が迅速に行われ、ユーザー体験が向上することが期待できる。
- APIを用いてサーバーサイドからJSON形式のデータを受け取り、JavaScriptで動的にDOMを生成することが一般的。
リクエストしてブラウザに描画するまでの流れ
- ユーザーがWebアプリケーションにアクセスする。
- 初回アクセス時は、必要な静的ファイル（HTML、CSS、JavaScript）をサーバーからダウンロードする。
- ブラウザが静的ファイルを解釈し、画面上にSPAのUIを描画する。
- ユーザーがページを操作すると、JavaScriptが実行され、サーバーからデータを取得して、UIを動的に更新する。
- UIが更新され、ユーザーに最新の情報が表示される。
メリット
- ページ遷移が不要であるため、ページの更新が高速であり、ユーザー体験が向上する。
- 静的なHTMLやCSS、JavaScriptファイルの再取得を必要としないため、通信量が削減され、ページの読み込み速度が向上する。
- サーバーサイドのAPIからJSON形式のデータを受け取り、クライアント側で動的にDOMを生成するため、ページの描画が迅速に行われる。
- 開発者は、アプリケーションの構造をよりシンプルに把握できるため、開発作業がスピードアップしやすく、メンテナンス性が向上する。
実現できる技術
- React.js
- Vue.js
SSR(Server-Side Rendering)
SSRとは
- サーバーサイドでHTMLを動的に生成する方法
- サーバーサイドでデータを取得し、HTMLに反映させてから、クライアントにレスポンスを返す。
リクエストしてブラウザに描画するまでの流れ
- ブラウザからリクエストがサーバーに送信される
- サーバーはリクエストを受け取り、データを取得する
- サーバーはHTMLを生成し、データを反映させる
- サーバーはブラウザにレスポンスを返す
- ブラウザはHTMLを受け取り、画面に表示する
メリット
- SEO に強い
- 常に最新の情報を表示することができる
- 重たい処理をサーバー側で対応可能
- ブラウザの負担が減り、端末スペック（メモリー等）を意識しないで良いので、ブラウザのスペックの高くない機器(スマホ)でも安心した表示速度を保つことができる。
- 動的なコンテンツが多いウェブサイトに適している。
実現できる技術
- Next.js (React)
- Nuxt.js (Vue.js)
- Sapper (Svelte)
SSG(Static Site Generator)
SSGとは
- サーバー側で事前に(ビルド時)、APIからのデータ取得とそれに伴ったHTMLを構築しておく方式
- クライアントからリクエストされた時にHTMLを表示するだけなので、レスポンスが高速。
- 1回のビルドを前もって行っているため、ユーザーが「ページ見たい！」とリクエストをしてからかなりの速度で表示することができる
- Next.js公式で推奨されている。(要件次第)
リクエストしてブラウザに描画するまでの流れ
- サイトをビルドする
- ブラウザからリクエストがサーバーに送信される
- サーバーは事前に生成したHTMLを返す
- ブラウザはHTMLを受け取り、画面に表示する
メリット
- SEO に強い
- ページの表示速度が早く、ユーザビリティが高い
- 静的なコンテンツが多いウェブサイトに適している
実現できる技術
- Next.js(React)
- Gatsby (React)
CSR(Client-Side Rendering)
CSRとは
- ブラウザ上でJavaScriptを使用してクライアントサイでHTMLを動的に生成することを指す。
- クライアントがページにアクセス->サーバーからJavaScriptファイルをダウンロード->その後にJavaScriptが実行されてHTMLが動的
リクエストしてブラウザに描画するまでの流れ
- ブラウザからリクエストがサーバーに送信される
- サーバーはJavaScriptを含むファイルを返す
- ブラウザはJavaScriptを実行し、HTMLを生成する
- ブラウザはHTMLを受け取り、画面に表示する
メリット
- ユーザビリティが高い
- SPA (Single Page Application) に適している
実現できる技術
- React.js
- Vue.js
- Angular.js
ISR
ISRとは
- SSGとCSRの中間的な手法
- ビルド時に必要なデータを取得し、静的なHTMLを生成するが、古いHTMLをキャッシュし、更新が必要なページのみ動的に更新する
リクエストしてブラウザに描画するまでの流れ
- サイトをビルドする
- ブラウザからリクエストがサーバーに送信される
- サーバーはキャッシュされたHTMLを返す
- クライアント側でJavaScriptが実行され、必要なページのみ動的に更新される
- 更新されたページがキャッシュに保存される
メリット
- ページの表示速度が早く、ユーザビリティが高い
- SSGのメリットに加え、リアルタイムな更新が可能
実現できる技術
- Next.js
最後に
レンダリング戦略を選択するには、UXを重視、SEOを考慮する、アプリの複雑さに合わせる、パフォーマンスを重視するなどを注意する必要がありそうです。
アウトプットできないと理解しているとは言えないという事が今回わかりました。
今回まとめたレンダリング戦略をしっかり理解した上で今後の開発を進めていこうと思います。
今回参考にした記事を下記に載せます。画像等で説明している記事などもございますので、より理解が深まると思います。
Discussion