ゆめさくコード

同じ1ページ、5通りの届き方

luagate/web-rendering-v2Webレンダリング23 枚Web 開発
スライド103触れる図解124レッスンの導入6

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

発表モードで開く

Webレンダリング

同じ1ページ、5通りの届き方

そのHTMLを、いつ、どこで作るか

1
1

目次

1ページを追いかけながら5つの手法を見ます

1. 今日ずっと追いかける1ページ

2. CSR — ブラウザで作る

3. SSR — 頼まれてからサーバーで作る

4. SSG — 頼まれる前に作っておく

5. ISR — 古いまま返して裏で作り直す

6. RSC と、選び方

2
2
Webレンダリング - 共通の題材

今日ずっと追いかける1ページ

この講座ページを、最後まで例に使います。まず完成形を見てください。

利用者に見えている画面
chotdekiru.com/lesson/python-intro
Python入門
¥4,900
受講者 1,284人
その画面を作っているHTML
<h1>Python入門</h1>
<p>¥4,900</p>
<p>受講者 1,284刻々と増えていく値人</p>
3
3
Webレンダリング - 共通の題材

問いはひとつだけ

CSR・SSR・SSG・ISR・RSC は、どれも別々の技術に見えて、答えているのは同じ問いです。

  • さっきのHTMLを「いつ」作るか — 利用者が来たとき / それより前
  • さっきのHTMLを「どこで」作るか — サーバー / 利用者のブラウザ
  • この2つの答えの組み合わせが、そのまま手法の名前になっている
  • 以降のスライドは、すべてこの2点だけを見ていきます
4
4
Webレンダリング - CSR

CSR — ブラウザで作る

サーバーは空の入れ物だけを返し、中身はブラウザが後から組み立てます。

ブラウザ
利用者の手元
Webサーバー
ファイルの置き場
APIサーバー
データの置き場
/lesson/python-intro をください
①
空のHTMLと app.js をどうぞ
②
app.js が動いた。講座データをください
③
受講者 1,284人 です
④
5
5
Webレンダリング - CSR

CSRで最初に届くHTML

④が終わるまで、利用者の画面には何も出ていません。

②の直後に見えている画面
chotdekiru.com/lesson/python-intro
（白いまま。Python入門 の文字はまだどこにも無い）
②で実際に届いたHTML
<div id="root"></div>中身が無い
<script src="/app.jsこれから取りに行く"></script>
6
6
Webレンダリング - CSR

CSRで起きること

組み立てをブラウザに任せた結果、得るものと失うものがはっきり分かれます。

得るもの

  • 画面が出たあとの操作が速い
  • サーバーはファイルを配るだけで済む
  • ページ間の移動で画面が再読み込みされない

失うもの

  • 最初の表示までが遅い（①〜④を待つ）
  • app.js を落とせない回線では何も出ない
  • HTMLに文字が無いので、読み取る側に中身が伝わりにくい
7
7
Webレンダリング - CSR
クイズ

確認クイズ

CSRのページを、HTMLだけ取得して中身を読もうとするとどうなる？

A
Python入門 も 1,284人 も読み取れる
B
Python入門 は読めるが 1,284人 は読めない
C
どちらも読み取れない
D
JavaScriptを実行しなくても必ず読める
8
8
Webレンダリング - CSR
答え

確認クイズ 解答

CSRのページを、HTMLだけ取得して中身を読もうとするとどうなる？

A
Python入門 も 1,284人 も読み取れる
B
Python入門 は読めるが 1,284人 は読めない
C
どちらも読み取れない
D
JavaScriptを実行しなくても必ず読める

最初に届くHTMLには <div id="root"></div> しかありません。文字は app.js が動いたあとに差し込まれます。JavaScriptを実行してから読み直す相手なら読めますが、それは追加の処理が走った結果です。

9
9
Webレンダリング - SSR

SSR — 頼まれてからサーバーで作る

組み立てをサーバー側に戻します。往復の回数が減ります。

ブラウザ
利用者の手元
Webサーバー
ここで組み立てる
APIサーバー
データの置き場
/lesson/python-intro をください
①
講座データをください
②
受講者 1,284人 です
③
1,284人 まで入ったHTMLをどうぞ
④
10
10
Webレンダリング - SSR

SSRで最初に届くHTML

最初に見た完成形が、そのまま最初の1通で届いています。

④の直後に見えている画面
chotdekiru.com/lesson/python-intro
Python入門
¥4,900
受講者 1,284人
④で実際に届いたHTML
<h1>Python入門</h1>
<p>¥4,900</p>
<p>受講者 1,284もう入っている人</p>
<script src="/app.js押すために後から届く"></script>
11
11
Webレンダリング - SSR

ハイドレーション — 見えると動くは別

SSRでもJavaScriptが不要になるわけではありません。ここを取り違えると計測を誤ります。

  • ④の時点で「見える」— 文字はもうHTMLに入っている
  • app.js が届いて実行されて初めて「押せる」— ボタンに処理が付く
  • この後付け作業をハイドレーションと呼ぶ
  • 見えてから押せるまでの間に押されたクリックは、取りこぼしになる
12
12
Webレンダリング - SSG

SSG — 頼まれる前に作っておく

利用者が来る前、ビルドのときに組み立ててしまいます。

ビルド
公開作業のとき
配信元
出来上がりの置き場
ブラウザ
利用者の手元
受講者 1,284人 のHTMLを置いておく
① 公開時
/lesson/python-intro をください
② 後日
置いてあるHTMLをそのままどうぞ
③
13
13
Webレンダリング - SSG

SSGの弱点は、HTMLを見ても分からない

届くHTMLはSSRとまったく同じです。違うのは作られた時刻で、実際の受講者は既に1,509人に増えています。

利用者に見えている画面
chotdekiru.com/lesson/python-intro
Python入門
¥4,900
受講者 1,284人
※ 見た目では古いことに気づけない
届いたHTML（ビルド時に作られたもの）
<h1>Python入門</h1>
<p>¥4,900</p>
<p>受講者 1,284公開時のまま止まっている人</p>
14
14
Webレンダリング - ISR

ISR — 古いまま返して、裏で作り直す

SSGの速さを保ったまま、SSGのズレを時間で縮める仕組みです。

ブラウザ
利用者の手元
配信元
出来上がりの置き場
APIサーバー
データの置き場
ください
① 1人目 — 前回生成から一定時間が過ぎている
まず古い 1,284人 を返す
②
最新は？ → 1,509人 で作り直す
③ 裏で
ください → 1,509人 が返る
④ 2人目
15
15
Webレンダリング - 整理

4つの手法を「いつ」「どこで」で並べる

名前を覚えるより、左の2列を言えるようになれば十分です。

HTMLを作るのはいつ
作るのはどこ
1,284人 のズレ

CSR

利用者が来たあと

利用者のブラウザ

ズレない（毎回取りに行く）

SSR

利用者が来たとき

サーバー

ズレない（毎回作る）

SSG

公開作業のとき

サーバー

公開からの経過時間ぶん

ISR

公開時 + 一定時間ごと

サーバー

設定した時間ぶん

16
16
Webレンダリング - RSC

RSC — コードそのものを送らない

サーバーコンポーネントは、実行結果だけがブラウザに渡り、中身のコードは渡りません。

サーバーだけで動くコンポーネント
async function Lesson() {
const key = process.env.DB_KEYブラウザには渡らない;
const n = await db.countサーバー内で完結する(key);
return <p>受講者 {n}人</p>;
}
ブラウザに届くもの
実際に送られてくる中身
受講者 1,509人 という 描画結果の記述だけが送られる DB_KEY も db.count も この中には存在しない
17
17
Webレンダリング - RSC

RSCの位置づけ

CSR・SSR・SSG・ISR とは並びが違い、ページ単位ではなく部品単位の話です。

  • 手法を選ぶ単位が、ページから部品に細かくなった
  • 動かない部分はサーバーで済ませ、押せる部分だけブラウザに送る
  • 結果、ブラウザに届くJavaScriptの量が減り、ハイドレーションも軽くなる
  • Next.js App Router で 2022年10月から使え、React 19（2024年12月）で正式版。2026年8月時点の状況です
18
18
Webレンダリング - 整理
クイズ

確認クイズ

受講者数のような「常に増える値」を必ず正確に見せたいページで、そのままでは不向きなのはどれ？

A
CSR
B
SSR
C
SSG
D
ISR
19
19
Webレンダリング - 整理
答え

確認クイズ 解答

受講者数のような「常に増える値」を必ず正確に見せたいページで、そのままでは不向きなのはどれ？

A
CSR
B
SSR
C
SSG
D
ISR

SSGは公開作業のときにHTMLを作って固定するため、SSGでは 1,284人 のまま止まります。しかも見た目では古いと分かりません。CSRは毎回APIに取りに行き、SSRは毎回作り直すのでズレません。ISRはズレを設定した時間内に抑える折衷案です。

20
20
Webレンダリング - まとめ

どれを選ぶか

ページの性質から選びます。手法から入ると必ず迷います。

こういうページなら
選ぶのは
理由

会社概要・利用規約

内容が何か月も変わらない

SSG

作り直す理由が無く、いちばん速い

講座ページ

受講者数だけが増える

ISR

多少の遅れは許せるが、速さは欲しい

在庫・価格ページ

間違えると事故になる

SSR

毎回作り直す以外に確実な方法がない

ログイン後の管理画面

本人にしか見えない

CSR

共有できないので事前生成の利点が無い

21
21
Webレンダリング - まとめ

まとめ

手法の名前は結論ではなく、2つの問いへの答えの組み合わせです。

  • 問いは「そのHTMLを、いつ・どこで作るか」だけだった
  • 早く作るほど速く、遅く作るほど正確 — このどちらを取るかの判断
  • 受講者 1,284人 がいつの値なのかを言えるなら、手法を理解している
  • RSCはこの判断を、ページ単位から部品単位に細かくしたもの
22
22
"

手法の名前は結論ではない。そのHTMLをいつ、どこで作ったのか。それを言えることが、速さと正確さのどちらを取ったかを言えるということ。

— Webレンダリング手法 全体のまとめ

23
23