今回、Webアプリケーションのナビゲーションやレンダリング手法・アーキテクチャの用語について勉強した際のメモを記事化してみました。
皆さんの学習のお役に立てれば幸いです。
Webにおけるナビゲーション
Webサイトの画面遷移には、主に以下の2つの方法があります。
-
ハードナビゲーション (Hard Navigation)
- 従来のWebサイトの基本的な動きです
- リンクをクリックするたびに、サーバーから新しいHTMLファイルを丸ごとダウンロードし、ページ全体を「ごっそり」入れ替えます。
- 別名：MPA (Multi-Page Application)
- ブラウザがWebサーバーから送信されたHTMLレスポンスを受け取り、現在のページ全体を新しいHTMLに置き換えることで画面遷移が行われます。
-
ソフトナビゲーション (Soft Navigation)
- 最近のWebアプリケーションで主流の動き。
- 最初の1回でWebアプリの骨格を読み込んだ後は、リンクをクリックしてもページ全体は再読み込みしません。
- JavaScriptが裏側で必要なデータだけをサーバーから取得し、ページの一部分だけを書き換えます。
- 別名：SPA (Single-Page Application)
- ブラウザのJavaScriptを利用して、URLやHistoryを直接書き換えながら、DOMを操作して画面を更新するナビゲーションを指します。
レンダリングの意味
「レンダリング」という言葉は、フロントエンド開発において様々な場面で登場し、技術の進化に伴いニュアンスが変化してきました。広義的には「データを計算して変換すること」を意味し、これは3DCGや動画、音声などのIT分野全般で使われる用語です。人間にとって利用しやすい形式に変換することを目的としています。
ここからは、各レンダリング手法およびアプリケーションのアーキテクチャについて解説します。
Client-Side Rendering (CSR)
- 意味: 「クライアントサイドでDOMを更新する手法」を指します。
- レンダリングの意味: CSRにおける「レンダリング」は、「コンテンツを生成しDOMを更新すること」を指します。
-
ページの表示フロー:
- 初回表示時やハードナビゲーションでは、まずサーバーからコンテンツが空のHTMLレスポンスが送信され、表示されます。
- 次に、ブラウザがJavaScriptを読み込み、その後、データ取得・コンテンツ生成をクライアントサイドで行い、DOMを更新します。
- 特徴: コンテンツの生成およびDOMの書き換えをする処理がクライアントで実行される点が特徴です。コンテンツの生成およびDOMの書き換えがクライアントで実行されることからこの手法がCSRと呼ばれます。
- SEO: 初回表示時に空のHTMLを返すCSRアプリケーションの初期の欠点としてSEO対策が困難であるという点がありましたが、現在ではGoogleのクローラがJavaScriptを実行できるようになったため、SEOの問題は改善されたとされています。
Server-Side Rendering (SSR)
-
意味:
- 「リクエスト時にサーバーサイドでHTMLを生成する手法」。
- 「初回表示のリクエスト時にHTMLをサーバーサイドで生成し、クライアントサイドでハイドレーションを行う手法」。
- 特徴: 初回表示が速く、SEOに強い
-
ページの表示フロー:
1. サーバーがリクエストを受信後、サーバーでデータ取得とコンポーネント実行を行い、完全なHTMLを生成
2. サーバーから完成品のHTMLを受け取り即座に表示される
3. JavaScriptを読み込んでハイドレーションを実行 - ReactやVue.jsといったSPA構築に適したJavaScriptフレームワークと、Next.jsやRemixといったサーバーサイドでもJavaScript/Reactのコードを実行できるフレームワークが主流となり、かつて「SSR with Hydration」と呼ばれていたものが単に「SSR」と呼ばれるようになり、その認識が広まっています。これは「初回表示時にSSR（with hydration）するSPAのこと」を指す用例も含まれます。
-
補足
- ハイドレーション（Hydration）：サーバーサイドで生成されたHTML（主にファーストビューのための静的なもの）を、ブラウザ側でもJavaScriptを実行してアプリケーションの状態を復元し、イベントリスナーのアタッチなどを行ってインタラクティブにする工程です。
Static Site Generation (SSG)
- 意味: 「ビルド時にHTMLを生成する手法」を指します。Static Site Generatorsの略称でもあります。
- 特徴: 静的なHTMLコンテンツを扱うため、CDNなどで比較的容易にキャッシュができるという利点がある。リクエストに応じて都度レスポンスを生成することはできません。
Single-Page Application (SPA)
- Webアプリケーションのアーキテクチャを指す用語
-
意味: 初回表示をCSRで行うアプリケーションです。主に2つの意味があります。どちらの意味でも、ページコンテンツの更新時に「ページ全体の再読み込みを行わない」こと、つまりソフトナビゲーションが用いられる点で共通しています。
- ソフトナビゲーションを行うアプリケーション全般（SSR/SSGと共存する概念）
- 単一のページ内で動き続けるアプリケーション、つまり、ページ遷移時にサーバーから新たにHTMLを送信されずに動作するアプリケーションを指します。
- HTMLページを最初に読み込んだ後、以降のページ遷移ではJavaScriptを使用して画面の一部を動的に更新する仕組み（CSR）を指します。これにより、画面遷移があたかも1つのページ内で行われているように見えます。
- SSRやSSGといったレンダリング技術を用いてSPAを構築するという解釈が可能です。
- ソフトナビゲーションを行う、初回表示もCSRのアプリケーション（SSR/SSGと排他的関係の概念）
- 初回表示時には空のHTMLが返されるような、クライアントサイドでのみ実行されるパターンを指します。
- 初回表示もCSRの場合、アプリケーション全体を通して、どのルート（ページ）においても共通のHTMLが配信されるため、アプリケーション全体が単一のページで構成されていると言えるかもしれません。
- ソフトナビゲーションを行うアプリケーション全般（SSR/SSGと共存する概念）
- 特徴: ページ全体の再読み込みが不要なので、高速なページ遷移が可能。またデスクトップアプリのような滑らかな操作感を実現
Multi-Page Application (MPA)
- 意味: ハードナビゲーションを行い、サーバーで生成したHTMLを表示するアプリケーション。重要なのは、ページ遷移時に新たにHTMLレスポンスが送信され、画面全体が再読み込みされる点と、HTML（コンテンツ）がブラウザ上ではなくサーバー側で生成される点です。
- HTML生成方法との関係: HTMLの生成方法がSSRやSSGであっても、ハードナビゲーションを伴う場合は、MPAとして分類されることが多いです。
- SPAに対して、従来からあったアプリケーションを指すレトロニムです。
Partial Prerendering (PPR)
-
意味: 「同一のルート（ページ）内でSSR/SSGのようにレンダリングするコンポーネントを両立する手法」を指します。
-
特徴: 静的（static）なコンポーネントと動的（dynamic）なコンポーネントを同一ルート（ページ）内に共存させることを実現する機能と説明されています。
- 静的（static）: ビルド時にレンダリングされるコンポーネントを指し、従来のSSG（Static Site Generation）に相当します。
- 動的（dynamic）: リクエストごとに（サーバーランタイムで）レンダリングされるコンポーネントを指し、従来のSSR（Server-Side Rendering）に相当します。
-
従来のアプリケーションではページ全体をSSGまたはSSRで生成するか選択していましたが、PPRではページ内でコンポーネントごとにレンダリング方法を設定できます。
React Server Components (RSC)
- 意味: React 18で導入された新しいアーキテクチャで、サーバー上で実行されるReactコンポーネント。従来のClient Components（CC）に加え、完全にサーバーサイドまたはビルド時のみ実行されるServer Components（SC）が導入されました。
- 特徴: Server ComponentsとSSRを組み合わせることで、高速な起動が得られるだけでなく、クライアントにダウンロードされるJavaScriptの量を劇的に減らすことができます。