ゆめさくコード

Webレンダリング手法の全体像

luagate/web-renderingWeb制作の基本22 枚Web 開発
スライド103触れる図解124レッスンの導入6

上から下へ、全 22 枚そのまま並べています。

発表モードで開く

Webレンダリング手法の全体像

CSR・SSR・SSG・ISR・RSC を一気に理解する

1
1

目次

Webレンダリング手法の全体像

学習内容

１　レンダリング手法の変遷史

２　CSR / SSR / SSG / ISR の基本

３　モダン・レンダリング（RSC / Islands）

４　認証・認可とレンダリング

2
2
Web制作の基本

レンダリングとは？

「データ → ユーザーの画面に見える HTML」に変換する処理のこと

  • どこで HTML を組み立てるか？（サーバー or ブラウザ）
  • いつ HTML を組み立てるか？（リクエスト時 or ビルド時）
  • この 2軸 の組み合わせで手法が決まる
3
3

Web制作の基本

1

レンダリング手法の変遷史

4
4
Web制作の基本

レンダリング手法の進化

約30年のWeb史を5つの時代に分けて振り返る

純粋SSR
Ajax
SPA/CSR
モダンSSR
RSC
5
5
Web制作の基本

① 黎明期：純粋なSSR時代

1990年代〜2000年代半ば

  • Perl (CGI), PHP, Ruby on Rails, Java (Struts)
  • リクエストのたびにサーバーがHTMLを組み立てて返却
  • ページ遷移のたびに画面が真っ白 → 再読み込み
  • ロジックも表示もすべてサーバー側
  • 「フロントエンド」という概念がまだ薄かった
6
6
Web制作の基本

② Ajaxの登場：部分更新の始まり

2005年〜 Googleマップの衝撃

  • jQuery, XMLHttpRequest (Ajax)
  • 基本のHTMLはサーバーから受け取る
  • 中のデータだけを後から非同期で取得して書き換え
  • 「画面が白くならない」UXの原型が誕生
7
7
Web制作の基本

③ SPAの爆発：CSR黄金時代

2010年代前半〜2018年頃

  • AngularJS, Backbone.js, React, Vue.js
  • サーバーは「空っぽのHTML」＋「巨大なJS」を1回送るだけ
  • 以降はブラウザ内でJSが画面を描画し続ける
  • Chromeなどブラウザの性能向上が後押し
  • 課題：JSが重い → 初回表示が遅い、SEOが壊れる
8
8
Web制作の基本

④ 揺り戻し：モダンSSR / SSG

2018年〜2021年頃

  • Next.js (Pages Router), Nuxt.js, Gatsby
  • 最初の1ページ目はサーバーで作る（SSR/SSG）
  • その後はJSが乗っ取ってSPAとして動く（Hydration）
  • 「爆速な初回表示」と「滑らかなページ遷移」の両立
9
9
Web制作の基本

⑤ コンポーネント単位の最適化：RSC時代

2022年〜現在

  • Next.js (App Router), Remix, Astro, Qwik
  • RSC：サーバー部品とブラウザ部品を1ページ内に混在
  • Island Architecture：静的HTMLの海に動く部品（島）だけ浮かべる
  • ブラウザに送るJSの量を極限まで削る
10
10

Web制作の基本

2

レンダリング手法の基本

11
11
Web制作の基本

CSR（Client Side Rendering）

ブラウザが主導権を握るレンダリング

CSR

ブラウザが空のHTMLを受け取り、JSをダウンロード・実行してDOMを構築する手法。データ取得もルーティングもすべてクライアント側。

・メリット：ページ遷移が高速、リッチなUI

・課題：初回表示が遅い（White Screen）

・課題：SEOクローラーがJSを実行できない場合がある

・課題：低スペック端末での負荷が大きい

12
12
Web制作の基本

SSR（Server Side Rendering）

リクエストごとにサーバーでHTMLを生成

SSR

リクエストのたびにサーバーでJSを実行し、完成したHTMLをブラウザに返す。ブラウザは届いた瞬間に文字や画像が見える。

・メリット：初回表示が速い、SEOに強い

・課題：サーバーの計算リソースを消費

・課題：TTFB（最初の1バイトが届くまで）が増大する可能性

13
13
Web制作の基本

SSG（Static Site Generation）

ビルド時に全ページのHTMLを事前生成

SSG

デプロイ前（ビルド時）に全ページのHTMLを作成し、ストレージに配置。サーバーでの計算が不要で、CDNから最速配信。

・メリット：圧倒的に速い（CDN配信）

・メリット：サーバー負荷ゼロ

・課題：更新のたびに再ビルドが必要

・課題：数万ページの大規模サイトではビルドに時間がかかる

14
14
Web制作の基本

ISR（Incremental Static Regeneration）

SSGの速さ + バックグラウンド更新

ISR

SSGの速さを保ちつつ、バックグラウンドで一定時間ごとにページを個別に更新する。古いページを見せながら裏で最新版を作るハイブリッド手法。

・メリット：SSG並みの速度

・メリット：フルビルド不要で個別更新

・Next.js が先駆けて実装した手法

15
15
Web制作の基本

4つのレンダリング手法を比較

それぞれの特徴を一覧で整理

HTMLの生成場所
生成タイミング
初回速度
SEO

CSR

ブラウザ

リクエスト時

遅い

△

SSR

サーバー

リクエスト時

速い

◎

SSG

ビルド時

デプロイ前

最速

◎

ISR

ビルド時+裏で更新

段階的

最速

◎

16
16

Web制作の基本

3

モダン・レンダリング

17
17
Web制作の基本

RSC（React Server Components）

SSRとRSCの違いを比較します。

SSRとの違い

  • SSR：ページ全体をHTMLにする
  • RSC：特定の部品だけサーバーで実行
  • JSの実行コードをブラウザに送らない

メリット

  • ブラウザに送るJSが劇的に減少
  • ページ遷移が爆速
  • サーバー/クライアントを部品単位で選択
18
18
Web制作の基本

Island Architecture

静的HTMLの海に動く部品（島）だけ浮かべる手法。

概念

  • ページの大部分は静的なHTML
  • 動的な部品（島）だけにJSを適用
  • 代表フレームワーク：Astro

効果

  • JSの量がほぼゼロに近づく
  • 静的コンテンツは即座に表示
  • 動く部品だけ後からhydrate
19
19

Web制作の基本

4

認証・認可とレンダリング

20
20
Web制作の基本

ログインが必要なページをSSGできるか？

認証とレンダリング手法の組み合わせ

  • skeleton（骨組み）だけSSGして中身をCSRで取得
  • Middlewareを使ったSSRでの認証チェック
  • Edge Runtime でトークン検証 → SSRへ振り分け
  • 公開部分はSSG、認証後コンテンツはCSR/SSRのハイブリッド
21
21
"

最適なレンダリング手法は1つではない。 ページの性質に合わせて使い分けるのが、2026年のベストプラクティス。

— まとめ

22
22