「【レンダリング大全】CSR, SSR, SPA, MPA, PPRの意味、そもそもレンダリングとは【2025年始】」を読んだ学びメモ📝

2025/01/12のアンテナ記事

Zennの記事である、「【レンダリング大全】CSR, SSR, SPA, MPA, PPRの意味、そもそもレンダリングとは【2025年始】」を読んだ学びメモです。

なんの記事

この記事では、フロントエンド開発における「レンダリング」の概念と、関連する用語（CSR、SSR、SPA、MPA、PPR）の意味について解説している。

まとめ

レンダリングの意味

広義的な意味

データを計算して別の形式に変換すること。

例）動画のレンダリングとか

ブラウザにおける意味

Webコンテンツを画面上に描画すること。 HTMLなどを変換したものを OSのグラフィックライブラリに渡すまでの一連の流れ。　

Reactにおける意味

Reactがコンポーネントを実行すること。

レンダーフェーズ

• Reactコンポーネントの呼び出しのこと。呼び出しによって仮想DOMの更新を行う。レンダーは再帰的に行われる。
• 2種類ある
  • 初回レンダー
    • React がルート (root) コンポーネントを呼ぶこと
  • 次回以降のレンダー
    • state の更新によってレンダーがトリガーされた関数コンポーネントを、React が呼び出す

コミットフェーズ

• 仮想DOMの変更を実際のDOMに反映すること
• 2種類ある
  • 初回レンダー後
    • Reactは appendChild() DOM API を使用して、作成したすべての OMノードを画面に表示
  • 再レンダー後
    • レンダー間で仮想DOMに違いが生じた場合にのみ、DOMノードを変更します

ペイント(ブラウザレンダリング)

• ブラウザへ描画

SEE: https://ja.react.dev/learn/render-and-commit

各種レンダリング手法

Client-Side Rendering (CSR)

クライアントサイドでDOMを更新する手法。

多くの場面では、初回表示時に空のHTMLを受け取り、JavaScriptでコンテンツを生成・表示するという意味で使われる。が、この技術はクライアント再度でDOMを更新することが真なる意味なので、初回表示じゃない場面でも使える。例えば、初回表示時はSSRで、ナビゲーション時にCSRにするといったこともできる。

Server-Side Rendering (SSR)

サーバーサイドでHTMLを生成し、クライアントに送信する手法。初回表示時に完全なHTMLを提供し、クライアントでハイドレーションを行う。

💡ハイドレーション

• ブラウザ上でもJavaScriptを実行してページをインタラクティブにすること

Static Site Generation (SSG)

ビルド時にHTMLを生成する手法。事前に生成された静的なHTMLをサーバーから提供。

リクエストに応じてレスポンスを都度生成することはできない。

アプリケーションの種類

Single-Page Application (SPA)

ソフトナビゲーション（JavaScriptによるページ遷移）を行うアプリケーション。初回表示やページ遷移時にCSRを活用

Multi-Page Application (MPA)

ハードナビゲーション（ブラウザの標準的なページ遷移）を行い、サーバーで生成したHTMLを表示するアプリケーション。

• ページ遷移時に画面が再読込される

Partial Prerendering (PPR)

ページの特定部分をSSR/SSGで事前レンダリングし、残りの部分をCSRで動的に処理する手法

• 静的な部分はSSR/SSGで事前レンダリングしておいたものを使うことで、表示を早くする。
• 動的な情報を用いて表示を制御する箇所にのみ、CSRを活用する。

以上により、「表示の高速化」と「動的な表示」を両立できる