[{"_1":2,"_425":-5,"_426":-5},"loaderData",{"_3":4},"routes/present",{"_5":6,"_7":8},"deckKey","luagate/web-rendering-v2","slides",[9,21,37,73,85,132,150,168,180,187,206,221,231,256,267,293,332,358,368,372,376,410,419],{"_10":11,"_12":13,"_13":14,"_15":16,"_17":18,"_19":20},"id",1,"type","title","同じ1ページ、5通りの届き方","subtitle","そのHTMLを、いつ、どこで作るか","category","Webレンダリング","cover",true,{"_10":22,"_12":23,"_13":24,"_17":18,"_25":26,"_27":28,"_35":36},2,"toc","目次","heading","1ページを追いかけながら5つの手法を見ます","items",[29,30,31,32,33,34],"1. 今日ずっと追いかける1ページ","2. CSR — ブラウザで作る","3. SSR — 頼まれてからサーバーで作る","4. SSG — 頼まれる前に作っておく","5. ISR — 古いまま返して裏で作り直す","6. RSC と、選び方","theme","light",{"_10":38,"_12":39,"_13":40,"_41":42,"_17":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_65":66},3,"annotated-source","今日ずっと追いかける1ページ","icon","monitor","Webレンダリング - 共通の題材","description","この講座ページを、最後まで例に使います。まず完成形を見てください。","sourceSide","right","previewLabel","利用者に見えている画面","sourceLabel","その画面を作っているHTML","source","

Python入門

¥4,900

受講者 1,284人

","annotations",[56],{"_57":58,"_59":60,"_61":62,"_63":64},"match","1,284","label","刻々と増えていく値","side","above","color","#DC2626","preview",{"_67":68,"_69":70,"_71":72},"kind","browser","caption","chotdekiru.com/lesson/python-intro","html","

Python入門

¥4,900

受講者 1,284人

",{"_10":74,"_12":75,"_13":76,"_41":77,"_17":43,"_44":78,"_79":80},4,"content","問いはひとつだけ","help-circle","CSR・SSR・SSG・ISR・RSC は、どれも別々の技術に見えて、答えているのは同じ問いです。","bullets",[81,82,83,84],"さっきのHTMLを「いつ」作るか — 利用者が来たとき / それより前","さっきのHTMLを「どこで」作るか — サーバー / 利用者のブラウザ","この2つの答えの組み合わせが、そのまま手法の名前になっている","以降のスライドは、すべてこの2点だけを見ていきます",{"_10":86,"_12":87,"_13":88,"_41":89,"_17":90,"_44":91,"_92":93,"_108":109},5,"exchange","CSR — ブラウザで作る","cpu","Webレンダリング - CSR","サーバーは空の入れ物だけを返し、中身はブラウザが後から組み立てます。","actors",[94,98,103],{"_10":68,"_59":95,"_41":42,"_96":97},"ブラウザ","detail","利用者の手元",{"_10":99,"_59":100,"_41":101,"_96":102},"web","Webサーバー","server","ファイルの置き場",{"_10":104,"_59":105,"_41":106,"_96":107},"api","APIサーバー","database","データの置き場","turns",[110,117,123,127],{"_111":68,"_112":99,"_113":114,"_115":116},"from","to","note","①","say","/lesson/python-intro をください",{"_111":99,"_112":68,"_113":118,"_115":119,"_120":121},"②","空のHTMLと app.js をどうぞ","values",[122],"app.js",{"_111":68,"_112":104,"_113":124,"_115":125,"_120":126},"③","app.js が動いた。講座データをください",[122],{"_111":104,"_112":68,"_113":128,"_115":129,"_120":130},"④","受講者 1,284人です",[131],"1,284人",{"_10":133,"_12":39,"_13":134,"_41":135,"_17":90,"_44":136,"_46":47,"_48":137,"_50":138,"_52":139,"_54":140,"_65":148},6,"CSRで最初に届くHTML","file","④が終わるまで、利用者の画面には何も出ていません。","②の直後に見えている画面","②で実際に届いたHTML","

\n",[141,145],{"_57":142,"_59":143,"_61":144},"

","中身が無い","below",{"_57":146,"_59":147,"_61":144},"/app.js","これから取りに行く",{"_67":68,"_69":70,"_71":149},"

（白いまま。Python入門の文字はまだどこにも無い）

",{"_10":151,"_12":152,"_13":153,"_41":89,"_17":90,"_44":154,"_155":156,"_47":162},7,"two-column","CSRで起きること","組み立てをブラウザに任せた結果、得るものと失うものがはっきり分かれます。","left",{"_25":157,"_79":158},"得るもの",[159,160,161],"画面が出たあとの操作が速い","サーバーはファイルを配るだけで済む","ページ間の移動で画面が再読み込みされない",{"_25":163,"_79":164},"失うもの",[165,166,167],"最初の表示までが遅い（①〜④を待つ）","app.js を落とせない回線では何も出ない","HTMLに文字が無いので、読み取る側に中身が伝わりにくい",{"_10":169,"_12":170,"_13":171,"_17":90,"_172":173,"_174":175},8,"quiz","確認クイズ","question","CSRのページを、HTMLだけ取得して中身を読もうとするとどうなる？","choices",[176,177,178,179],"Python入門も 1,284人も読み取れる","Python入門は読めるが 1,284人は読めない","どちらも読み取れない","JavaScriptを実行しなくても必ず読める",{"_10":181,"_12":182,"_13":183,"_17":90,"_44":184,"_172":173,"_174":185,"_186":22,"_35":36},9,"quiz-answer","確認クイズ解答","最初に届くHTMLには

しかありません。文字は app.js が動いたあとに差し込まれます。JavaScriptを実行してから読み直す相手なら読めますが、それは追加の処理が走った結果です。",[176,177,178,179],"correctIndex",{"_10":188,"_12":87,"_13":189,"_41":101,"_17":190,"_44":191,"_92":192,"_108":197},10,"SSR — 頼まれてからサーバーで作る","Webレンダリング - SSR","組み立てをサーバー側に戻します。往復の回数が減ります。",[193,194,196],{"_10":68,"_59":95,"_41":42,"_96":97},{"_10":99,"_59":100,"_41":101,"_96":195},"ここで組み立てる",{"_10":104,"_59":105,"_41":106,"_96":107},[198,199,201,203],{"_111":68,"_112":99,"_113":114,"_115":116},{"_111":99,"_112":104,"_113":118,"_115":200},"講座データをください",{"_111":104,"_112":99,"_113":124,"_115":129,"_120":202},[131],{"_111":99,"_112":68,"_113":128,"_115":204,"_120":205},"1,284人まで入ったHTMLをどうぞ",[131],{"_10":207,"_12":39,"_13":208,"_41":135,"_17":190,"_44":209,"_46":47,"_48":210,"_50":211,"_52":212,"_54":213,"_65":219},11,"SSRで最初に届くHTML","最初に見た完成形が、そのまま最初の1通で届いています。","④の直後に見えている画面","④で実際に届いたHTML","

Python入門

¥4,900

受講者 1,284人

\n",[214,217],{"_57":58,"_59":215,"_61":62,"_63":216},"もう入っている","#059669",{"_57":146,"_59":218,"_61":144},"押すために後から届く",{"_67":68,"_69":70,"_71":220},"

Python入門

¥4,900

受講者 1,284人

",{"_10":222,"_12":75,"_13":223,"_41":224,"_17":190,"_44":225,"_79":226},12,"ハイドレーション — 見えると動くは別","droplet","SSRでもJavaScriptが不要になるわけではありません。ここを取り違えると計測を誤ります。",[227,228,229,230],"④の時点で「見える」— 文字はもうHTMLに入っている","app.js が届いて実行されて初めて「押せる」— ボタンに処理が付く","この後付け作業をハイドレーションと呼ぶ","見えてから押せるまでの間に押されたクリックは、取りこぼしになる",{"_10":232,"_12":87,"_13":233,"_41":234,"_17":235,"_44":236,"_92":237,"_108":247},13,"SSG — 頼まれる前に作っておく","package","Webレンダリング - SSG","利用者が来る前、ビルドのときに組み立ててしまいます。",[238,242,246],{"_10":239,"_59":240,"_41":234,"_96":241},"build","ビルド","公開作業のとき",{"_10":243,"_59":244,"_41":101,"_96":245},"cdn","配信元","出来上がりの置き場",{"_10":68,"_59":95,"_41":42,"_96":97},[248,252,254],{"_111":239,"_112":243,"_113":249,"_115":250,"_120":251},"① 公開時","受講者 1,284人のHTMLを置いておく",[131],{"_111":68,"_112":243,"_113":253,"_115":116},"② 後日",{"_111":243,"_112":68,"_113":124,"_115":255},"置いてあるHTMLをそのままどうぞ",{"_10":257,"_12":39,"_13":258,"_41":259,"_17":235,"_44":260,"_46":47,"_48":49,"_50":261,"_52":53,"_54":262,"_65":265},14,"SSGの弱点は、HTMLを見ても分からない","clock","届くHTMLはSSRとまったく同じです。違うのは作られた時刻で、実際の受講者は既に1,509人に増えています。","届いたHTML（ビルド時に作られたもの）",[263],{"_57":58,"_59":264,"_61":62,"_63":64},"公開時のまま止まっている",{"_67":68,"_69":70,"_71":266},"

Python入門

¥4,900

受講者 1,284人

※ 見た目では古いことに気づけない

",{"_10":268,"_12":87,"_13":269,"_41":270,"_17":271,"_44":272,"_92":273,"_108":277},15,"ISR — 古いまま返して、裏で作り直す","refresh-cw","Webレンダリング - ISR","SSGの速さを保ったまま、SSGのズレを時間で縮める仕組みです。",[274,275,276],{"_10":68,"_59":95,"_41":42,"_96":97},{"_10":243,"_59":244,"_41":101,"_96":245},{"_10":104,"_59":105,"_41":106,"_96":107},[278,281,284,289],{"_111":68,"_112":243,"_113":279,"_115":280},"① 1人目 — 前回生成から一定時間が過ぎている","ください",{"_111":243,"_112":68,"_113":118,"_115":282,"_120":283},"まず古い 1,284人を返す",[131],{"_111":243,"_112":104,"_113":285,"_115":286,"_120":287},"③ 裏で","最新は？ → 1,509人で作り直す",[288],"1,509人",{"_111":68,"_112":243,"_113":290,"_115":291,"_120":292},"④ 2人目","ください → 1,509人が返る",[288],{"_10":294,"_12":295,"_13":296,"_17":297,"_44":298,"_299":300,"_304":305,"_308":309,"_35":36},16,"table","4つの手法を「いつ」「どこで」で並べる","Webレンダリング - 整理","名前を覚えるより、左の2列を言えるようになれば十分です。","headers",[301,302,303],"HTMLを作るのはいつ","作るのはどこ","1,284人のズレ","headerIcons",[259,306,307],"map-pin","alert-triangle","rows",[310,317,323,327],{"_59":311,"_312":313},"CSR","cells",[314,315,316],"利用者が来たあと","利用者のブラウザ","ズレない（毎回取りに行く）",{"_59":318,"_312":319},"SSR",[320,321,322],"利用者が来たとき","サーバー","ズレない（毎回作る）",{"_59":324,"_312":325},"SSG",[241,321,326],"公開からの経過時間ぶん",{"_59":328,"_312":329},"ISR",[330,321,331],"公開時 + 一定時間ごと","設定した時間ぶん",{"_10":333,"_12":39,"_13":334,"_41":335,"_17":336,"_44":337,"_46":155,"_50":338,"_48":339,"_52":340,"_54":341,"_65":348},17,"RSC — コードそのものを送らない","shield","Webレンダリング - RSC","サーバーコンポーネントは、実行結果だけがブラウザに渡り、中身のコードは渡りません。","サーバーだけで動くコンポーネント","ブラウザに届くもの","async function Lesson() {\n const key = process.env.DB_KEY;\n const n = await db.count(key);\n return

受講者 {n}人

;\n}",[342,345],{"_57":343,"_59":344,"_61":144,"_63":64},"process.env.DB_KEY","ブラウザには渡らない",{"_57":346,"_59":347,"_61":144,"_63":64},"db.count","サーバー内で完結する",{"_67":349,"_69":350,"_351":352},"terminal","実際に送られてくる中身","lines",[353,354,355,356,357],"受講者 1,509人という","描画結果の記述だけが送られる","","DB_KEY も db.count も","この中には存在しない",{"_10":359,"_12":75,"_13":360,"_41":361,"_17":336,"_44":362,"_79":363},18,"RSCの位置づけ","layers","CSR・SSR・SSG・ISR とは並びが違い、ページ単位ではなく部品単位の話です。",[364,365,366,367],"手法を選ぶ単位が、ページから部品に細かくなった","動かない部分はサーバーで済ませ、押せる部分だけブラウザに送る","結果、ブラウザに届くJavaScriptの量が減り、ハイドレーションも軽くなる","Next.js App Router で 2022年10月から使え、React 19（2024年12月）で正式版。2026年8月時点の状況です",{"_10":369,"_12":170,"_13":171,"_17":297,"_172":370,"_174":371},19,"受講者数のような「常に増える値」を必ず正確に見せたいページで、そのままでは不向きなのはどれ？",[311,318,324,328],{"_10":373,"_12":182,"_13":183,"_17":297,"_44":374,"_172":370,"_174":375,"_186":22,"_35":36},20,"SSGは公開作業のときにHTMLを作って固定するため、SSGでは 1,284人のまま止まります。しかも見た目では古いと分かりません。CSRは毎回APIに取りに行き、SSRは毎回作り直すのでズレません。ISRはズレを設定した時間内に抑える折衷案です。",[311,318,324,328],{"_10":377,"_12":295,"_13":378,"_17":379,"_44":380,"_299":381,"_304":385,"_308":389,"_35":36},21,"どれを選ぶか","Webレンダリング - まとめ","ページの性質から選びます。手法から入ると必ず迷います。",[382,383,384],"こういうページなら","選ぶのは","理由",[386,387,388],"file-text","check-circle","message-circle",[390,395,400,405],{"_59":391,"_312":392},"会社概要・利用規約",[393,324,394],"内容が何か月も変わらない","作り直す理由が無く、いちばん速い",{"_59":396,"_312":397},"講座ページ",[398,328,399],"受講者数だけが増える","多少の遅れは許せるが、速さは欲しい",{"_59":401,"_312":402},"在庫・価格ページ",[403,318,404],"間違えると事故になる","毎回作り直す以外に確実な方法がない",{"_59":406,"_312":407},"ログイン後の管理画面",[408,311,409],"本人にしか見えない","共有できないので事前生成の利点が無い",{"_10":411,"_12":75,"_13":412,"_41":387,"_17":379,"_44":413,"_79":414},22,"まとめ","手法の名前は結論ではなく、2つの問いへの答えの組み合わせです。",[415,416,417,418],"問いは「そのHTMLを、いつ・どこで作るか」だけだった","早く作るほど速く、遅く作るほど正確 — このどちらを取るかの判断","受講者 1,284人がいつの値なのかを言えるなら、手法を理解している","RSCはこの判断を、ページ単位から部品単位に細かくしたもの",{"_10":420,"_12":421,"_13":412,"_17":379,"_421":422,"_52":423,"_35":424},23,"quote","手法の名前は結論ではない。そのHTMLをいつ、どこで作ったのか。それを言えることが、速さと正確さのどちらを取ったかを言えるということ。","Webレンダリング手法全体のまとめ","accent","actionData","errors"]