SPA
フロントエンドの歴史はUIではなく「計算資源の配置」の歴史 ダイヤルアップ時代：回線が最も高価だった ブロードバンド時代：通信が安くなりUIが増える スマートフォン時代：CPUが弱くなる SSRの再評価：計算をサーバへ戻す CDNとエッジの登場：距離が問題…
フロントエンドは流行ではなく「ボトルネック移動」で変化している jQueryが解決した問題：ブラウザ差異 次のボトルネック：状態管理の崩壊 SPAが解決した問題：状態管理 SPAのボトルネック：初回表示 SSRが解決した問題：描画位置 SSRのボトルネック：不要…
フロントエンドのフレームワークが「毎年変わる」と感じる理由 そもそもフロントエンドの役割が変わり続けている jQueryが最適だった時代 次の問題：画面が壊れる SPAフレームワークが登場した理由 さらに新しい問題：表示が遅い SSRが流行した本当の理由 そ…
SPAでは「head」がページごとに存在しない 通常のWebページでメタタグが機能する仕組み SPAではHTMLが1回しか来ない なぜこれが問題になるのか headを書き換えれば良いのでは？ head管理ライブラリが必要になる理由 なぜSSRがこの問題を解決するのか Prerend…
SPAは「submit」を止めることで成立している ブラウザのネイティブsubmitはとても高機能 SPAはsubmitをキャンセルしている 代わりに何が起きているのか なぜ問題が頻発するのか 特に壊れやすい「リダイレクト」 なぜSSRでは問題が少ないのか よくある失敗例 …
SPAでは「必要なデータだけ欲しい」ためGraphQLが選ばれやすい REST APIは“画面”ではなく“資源”を返す Overfetch問題とは何か SPAは“画面中心設計”のアプリケーション GraphQLは「画面が欲しい形でデータを取得する」 Underfetch問題も同時に解決する それで…
SPAは「画面遷移をしないWeb」であり、だからマイクロフロントエンドと相性が良い MPAでフロントエンド分割が難しい本当の理由 SPAでは「1つのOSの上に複数アプリ」が動く マイクロフロントエンドの正体は「ルーティングの分散管理」 実際の実装は「アプリを…
SPAとSSRは「ログの意味」がまったく違います 従来のWeb（MPA/SSR）のログ構造 SPAで起きる変化 なぜ障害調査が難しくなるのか 必要になる新しいログ：フロントエンドログ 重要になる「画面遷移ログ」 SSRでもログ設計は変わる よくある失敗 APIログだけで分…
巨大バンドルの原因は「ライブラリが重い」ではありません なぜSPAはバンドルが1つに集まるのか Tree Shakingとは何をしているのか Tree Shakingが効かないパターン 副作用（side effect） CommonJS 動的参照 ライブラリが巨大化する理由 さらに大きな原因：…
SPAは「ページが切り替わらない」ことがメモリリークの原因です MPAでは起きにくく、SPAで起きる理由 イベントリスナがリークを生む仕組み Reactでよくある例 さらに危険なパターン setInterval DOM参照の保持 Promiseの未解決 メモリリークが実際に起きると…
Service Workerは「オフライン対応のためのAPI」ではありません SPAが抱える問題とキャッシュの必要性 SPAの通信はページではなくリソース単位になる Service Workerの動作原理 ブラウザの外で動くJavaScript キャッシュストレージという別のキャッシュ ブラ…
レンダリング方式の選択は後から直せない設計項目 なぜ後から変更できないのか 具体例 実務で起きる典型的な失敗 ケース1：メディアサイトをSPAで構築 ケース2：管理画面をSSRで構築 リプレースになる技術的理由 ルーティング 認証 表面上の対策が効かない理…
SPAかSSRかの二択にしてはいけない なぜ単一方式では破綻するのか ハイブリッドレンダリングの基本設計 ルーティング分割 実装の考え方 認証との関係 データ取得戦略 実務でよくある失敗 すべてをSPAにする すべてをSSRにする 注意点 なぜこの設計が増えてい…
SPAは万能ではなく「用途が限定された最適解」 SPAが得意なこと 社内システムと相性が良い理由 公開サイトで起きる問題 初回表示の遅さ SEOとクローラ URLの意味が弱くなる 実務で起きる設計失敗 SSRとの違い 向き不向きの目安 注意点 まとめ SPAは万能では…
SPAでSNSシェアカードが壊れるのはなぜか SNSクローラはブラウザではない SPAの初期HTMLの中身 メタタグ書き換え問題 GoogleとSNSの違い なぜSNSはJSを実行しないのか 実務でよくある誤解 解決策 1 SSR（Server Side Rendering） 2 SSG（静的生成） 3 Preren…
SPAで状態管理ライブラリ（Redux等）が必要になった歴史的背景 MPA時代の状態はどこにあったか SPAで起きた変化 コンポーネント分割が新たな問題を生む 状態の分散と不整合 状態管理ライブラリの役割 なぜ最初は不要に見えるのか 注意点：状態管理は万能では…
SSRとSPAでCORS設計が変わる理由をブラウザセキュリティモデルから解説 同一オリジンポリシーとは何か SPAでCORSが必要になる理由 SSRではなぜCORSを意識しないのか CORSと認証の関係 プリフライトが性能に影響する SSRとSPAの設計判断 よくある失敗 まとめ …
SPAでCSRF対策が軽視されやすい理由とSameSite Cookieの影響 CSRFとはどんな攻撃か なぜSPAでは問題が見えにくいのか SameSite Cookieとは何か SPA特有の落とし穴 よくある誤解：Authorizationヘッダなら安全？ 対策：CSRFトークン なぜSameSiteだけでは不十…
SPAで認証実装が複雑化する理由とトークンリフレッシュ問題 なぜSPAはセッション認証をそのまま使えないのか アクセストークンとは何か なぜトークンは短命にする必要があるのか トークンリフレッシュ問題 リフレッシュトークンの役割 同時リクエスト問題 ト…
SPAでAPI設計が重要になる理由とBFF（Backend For Frontend）の役割 サーバレンダリング時代のデータの流れ SPAでは何が変わるのか なぜAPI設計がUIを壊すのか BFF（Backend For Frontend）とは何か BFFが必要になる具体的な場面 GraphQLとの関係 注意点：BF…
SPAはなぜCore Web Vitalsで不利になりやすいのか Core Web Vitalsとは何を測っているのか SPAの初期表示で何が起きているか 「SPAは速い」は間違いではない LCPが悪化する本当の原因はAPI通信 なぜSSRがSEOで有利になるのか CLSもSPAで悪化しやすい よくあ…
SPAは遅いのではなく「描画の開始が遅れる」 Critical Rendering Pathとは何か 通常のWebページの場合 SPAの場合に起きること なぜLCPが遅くなるのか CSSブロッキングとの組み合わせ よくある誤解：JSが重いから遅い？ 改善アプローチ 注意点：Skeleton UIの…
SEOのためにSSRが必要、は半分正しい 検索エンジンは何を見ているのか SSRとは何をしているのか Prerenderingとは何か 技術的な違い（重要） どちらを選ぶべきか よくある誤解：GoogleはJSを完全に解釈する？ 注意点：Prerenderingの落とし穴 結局どう違うの…
コードスプリッティングは「軽くする技術」ではない まずSPAの初期表示で何が起きているか コードスプリッティングの仕組み ウォーターフォールでの変化 「効くタイミング」はページ遷移時 よくある失敗：分割しすぎ prefetchと組み合わせたときに真価が出る…
SPAは壊れているのではなく「サーバが正しく動いている」 そもそもSPAのルーティングとは何か なぜ404が起きるのか（本質） なぜリンククリックでは動くのか 必要になるサーバ設定の正体 よくある誤解：historyモードが悪い？ もう一つの問題：APIの404を壊…
SPAで「戻るボタンが壊れる」現象の正体 従来のWebではなぜ問題にならなかったのか SPAではページ遷移が存在しない History APIとは何か なぜ壊れるのか 典型的な失敗パターン 状態をメモリだけで管理** URLに状態を持たせない** API再取得だけに頼る** 正し…
SPAとSSRではキャッシュ戦略が根本から変わる まずHTTPキャッシュの基本 SPAでキャッシュするもの SSRでキャッシュするもの なぜ同じ設定が使えないのか APIキャッシュの扱いも変わる よくあるトラブル キャッシュ設計の考え方 実務での注意点 最後に SPAとS…
SPAにおけるHydrationの正体 まず前提：SPAは本来DOMを自分で作る SSRでは最初からHTMLが存在する Hydrationが必要になる理由 Hydrationで内部的に起きていること なぜHydrationが重いのか Hydrationが終わるまで何が起きるか よくある誤解 注意点 開発で気…
SPAで発生する「白画面問題」の正体 SPAの画面はHTMLでは作られていない JavaScriptバンドルとは何か 白画面が発生する具体的なポイント 1. ダウンロード失敗** 2. 構文エラー** 3. 実行時例外** なぜ開発環境では再現しないのか SSRとの決定的な違い JavaSc…
SPAはなぜ初回表示が遅くなりやすいのか ブラウザがページを表示するまでの流れ SPAで実際に起きている処理 1. JavaScriptのダウンロード** 2. JavaScriptのパース** 3. 実行（評価）** 4. API通信** 5. DOM生成** 「通信が遅い」のではない なぜSSRは早く見…
