SSR
フロントエンドの進化はUIの進化ではない ブラウザはどうやって画面を描いているのか jQuery時代の問題：reflow地獄 Virtual DOMの本当の役割 なぜSPAは重くなるのか SSRが速い理由 Hydrationという新しい問題 RSCが狙っているもの CSSの進化も同じ文脈 実務…
フロントエンドの歴史はUIではなく「計算資源の配置」の歴史 ダイヤルアップ時代：回線が最も高価だった ブロードバンド時代：通信が安くなりUIが増える スマートフォン時代：CPUが弱くなる SSRの再評価：計算をサーバへ戻す CDNとエッジの登場：距離が問題…
フロントエンドは流行ではなく「ボトルネック移動」で変化している jQueryが解決した問題：ブラウザ差異 次のボトルネック：状態管理の崩壊 SPAが解決した問題：状態管理 SPAのボトルネック：初回表示 SSRが解決した問題：描画位置 SSRのボトルネック：不要…
フロントエンドのフレームワークが「毎年変わる」と感じる理由 そもそもフロントエンドの役割が変わり続けている jQueryが最適だった時代 次の問題：画面が壊れる SPAフレームワークが登場した理由 さらに新しい問題：表示が遅い SSRが流行した本当の理由 そ…
SSRは「アクセシビリティを実装しやすい」構造を持っている スクリーンリーダーはJavaScriptを待たない SSRでは意味構造を直接伝えられる キーボード操作との関係 ARIAの役割が変わる 実務で起きる典型的な問題 SEOとの関係 ただしSSRなら自動でa11yが良くな…
SSRではGraphQLよりREST APIが自然に機能する場面がある SSRは“ページ生成処理”である REST APIは「まとめて取得」に強い SSRとGraphQLで発生しやすいボトルネック キャッシュ戦略が大きく違う セキュリティ面の違い 実務でよく起きる現象 REST APIが向くSSR…
マルチテナントWebではSSRのほうが自然に設計できる マルチテナントの本質は“ページが人によって違う”こと SPAで起きる問題：表示前に大量の情報が必要 SSRでは「最初から完成した画面」を返せる キャッシュ設計とも相性が良い セキュリティ面でも有利になる…
「アイソモーフィックJavaScript」は“同じコードを2回実行する”という設計のこと なぜSSRはJavaScriptをサーバで実行する必要があるのか SSRの本質：HTMLを返すのではなく“状態を同期する” なぜ“ユニバーサルJavaScript”ではなく“アイソモーフィック”なのか …
SPAとSSRは「ログの意味」がまったく違います 従来のWeb（MPA/SSR）のログ構造 SPAで起きる変化 なぜ障害調査が難しくなるのか 必要になる新しいログ：フロントエンドログ 重要になる「画面遷移ログ」 SSRでもログ設計は変わる よくある失敗 APIログだけで分…
Edge Runtimeは「速いサーバ」ではなく「距離をなくす仕組み」です SSRが遅く感じる本当の原因 CDNでは解決できなかった理由 Edge Runtimeの動作 Node.jsサーバとの違い なぜSSRと相性が良いのか ただし万能ではない ファイルシステムが使えない TCP接続が制…
SSRにNode.jsが選ばれる理由は「JavaScriptが書けるから」ではありません SSRリクエストの実際の流れ スレッド型サーバの問題 Node.jsのイベントループ SSRとイベントループの相性 APIフェッチの並列化 ストリーミングSSR よくある誤解 Node.jsはCPU処理が遅…
SSRとPWAは「相性が悪い」のではなく、キャッシュの担当範囲が違います Webアプリは実は多層キャッシュで動いている SSRのキャッシュは「HTMLのキャッシュ」 PWAのキャッシュは「リソースのキャッシュ」 なぜ「両立しない」と言われるのか 両立させる設計 HT…
SSRのDehydrationは「HTMLを渡す技術」ではなく「状態を渡す技術」です Hydrationの前に必ず存在するDehydration Hydrationとは何をしている処理なのか なぜそれだけでは動かないのか Dehydrationの仕組み サーバはHTMLと一緒に「状態」を送っている Hydrati…
レンダリング方式の選択は後から直せない設計項目 なぜ後から変更できないのか 具体例 実務で起きる典型的な失敗 ケース1：メディアサイトをSPAで構築 ケース2：管理画面をSSRで構築 リプレースになる技術的理由 ルーティング 認証 表面上の対策が効かない理…
SPAかSSRかの二択にしてはいけない なぜ単一方式では破綻するのか ハイブリッドレンダリングの基本設計 ルーティング分割 実装の考え方 認証との関係 データ取得戦略 実務でよくある失敗 すべてをSPAにする すべてをSSRにする 注意点 なぜこの設計が増えてい…
ECサイトでSSRが選ばれるのはSEOではなく売上の問題 なぜ表示速度が売上に影響するのか SSRが変えているのはLCP SPAとECの相性問題 実際に起きる現象 SEO以外の効果 SNS流入 広告品質スコア クローラ巡回 SSRでもSPAの利点は使える 注意点 サーバ負荷 在庫情…
SPAは万能ではなく「用途が限定された最適解」 SPAが得意なこと 社内システムと相性が良い理由 公開サイトで起きる問題 初回表示の遅さ SEOとクローラ URLの意味が弱くなる 実務で起きる設計失敗 SSRとの違い 向き不向きの目安 注意点 まとめ SPAは万能では…
ISRは「SSRの重さ」と「SSGの古さ」を同時に解決した 従来のSSRの問題 実際に起きる現象 SSGの問題 ISRの仕組み 重要なポイント なぜこれが重要なのか CDNとの関係 注意点 即時更新が必要なページ キャッシュの誤解 実務での使い分け まとめ ISRは「SSRの重…
SSRでOGPが表示される本当の理由 OGPとは何を見ているのか クローラが実際にやっている処理 SPAでOGPが壊れる理由 JavaScript実行問題 SSRが解決していること 実装例（Next.js） 実務で起きやすい失敗 キャッシュの罠 SSRが向いているサイト 注意点 まとめ S…
SSRとSPAでCORS設計が変わる理由をブラウザセキュリティモデルから解説 同一オリジンポリシーとは何か SPAでCORSが必要になる理由 SSRではなぜCORSを意識しないのか CORSと認証の関係 プリフライトが性能に影響する SSRとSPAの設計判断 よくある失敗 まとめ …
SSRでXSS対策がより重要になる理由とテンプレートエスケープの関係 XSSとは何が起きている攻撃なのか なぜSSRの方が危険度が上がるのか テンプレートエスケープとは何か 危険なパターン：エスケープ無効化 JavaScript埋め込み時の落とし穴 なぜテンプレート…
SSRでセッション管理が難しくなる理由とCookieの扱い まずCookieとセッションの関係を整理する SPAのときは何が起きていたか SSRでは通信経路が変わる なぜログインできない現象が起きるのか 解決方法：Cookieの転送（Forwarding） HttpOnly Cookieとセキュ…
SSRとSSG（Static Site Generation）の違いをビルド時レンダリングの観点から整理する レンダリングのタイミングがすべてを決める SSRの動作 SSGの動作 なぜSSGがCore Web Vitalsに強いのか SSRのメリットと注意点 SSGの弱点 よくある誤解：SSRの方が高機能…
HTMLが早く出るほどレイアウトは揺れやすくなる CLSとは何を測っているのか SSRでなぜ発生しやすいのか フォントロードが最大の原因になる 画像も同じ問題を起こす なぜLCPとトレードオフになるのか 対策：フォント表示戦略 対策：画像のサイズ指定 もう一つ…
SSRは「通信が重い」のではなく「計算が増える」 SPAとSSRでサーバの役割はどう変わるか なぜCPU使用率が上がるのか 具体的な比較 同時接続数との関係 よくある誤解：キャッシュすれば解決？ Node.js特有の問題 対策として行われること 注意点：サーバ増強だ…
SEOのためにSSRが必要、は半分正しい 検索エンジンは何を見ているのか SSRとは何をしているのか Prerenderingとは何か 技術的な違い（重要） どちらを選ぶべきか よくある誤解：GoogleはJSを完全に解釈する？ 注意点：Prerenderingの落とし穴 結局どう違うの…
SSRは「毎回レンダリングする」わけではない SPAとSSRのキャッシュの違い CDNが得意なもの エッジキャッシュとは何か Cache-Controlヘッダの役割 なぜSPAはCDNと相性が弱いのか キャッシュが破綻するケース エッジで再生成する仕組み（ISR） 結局、何が起き…
「SSRを速くした」のではなく「待たせ方を変えた」 従来のSSRの問題点 ストリーミングレンダリングの仕組み 何が高速化されているのか Suspenseとプレースホルダの役割 なぜSPAより速く感じるのか 注意点：万能ではない SSRの進化の方向性 「SSRを速くした」…
「SSRは速い」のではなく「先に始めている」 SSRの画面表示で実際に起きている通信 プリロードとは何をしているのか preloadの役割 SPAとの違い プリフェッチがページ遷移を速くする理由 なぜSPAは遅く見えるのか ネットワークウォーターフォールで見る違い …
SPAとSSRではキャッシュ戦略が根本から変わる まずHTTPキャッシュの基本 SPAでキャッシュするもの SSRでキャッシュするもの なぜ同じ設定が使えないのか APIキャッシュの扱いも変わる よくあるトラブル キャッシュ設計の考え方 実務での注意点 最後に SPAとS…
