Webアーキテクチャ

SSRでもREST APIが有利になる技術的な場面

SSRではGraphQLよりREST APIが自然に機能する場面がある SSRは“ページ生成処理”である REST APIは「まとめて取得」に強い SSRとGraphQLで発生しやすいボトルネック キャッシュ戦略が大きく違う セキュリティ面の違い 実務でよく起きる現象 REST APIが向くSSR…

SSRがマルチテナントWebに向いている理由

マルチテナントWebではSSRのほうが自然に設計できる マルチテナントの本質は“ページが人によって違う”こと SPAで起きる問題:表示前に大量の情報が必要 SSRでは「最初から完成した画面」を返せる キャッシュ設計とも相性が良い セキュリティ面でも有利になる…

SPAとSSRでログ設計が変わる理由(アクセスログとAPIログ)

SPAとSSRは「ログの意味」がまったく違います 従来のWeb(MPA/SSR)のログ構造 SPAで起きる変化 なぜ障害調査が難しくなるのか 必要になる新しいログ:フロントエンドログ 重要になる「画面遷移ログ」 SSRでもログ設計は変わる よくある失敗 APIログだけで分…

SSRでEdge Runtimeが注目される理由

Edge Runtimeは「速いサーバ」ではなく「距離をなくす仕組み」です SSRが遅く感じる本当の原因 CDNでは解決できなかった理由 Edge Runtimeの動作 Node.jsサーバとの違い なぜSSRと相性が良いのか ただし万能ではない ファイルシステムが使えない TCP接続が制…

SSRでNode.jsが使われる理由とイベントループ

SSRにNode.jsが選ばれる理由は「JavaScriptが書けるから」ではありません SSRリクエストの実際の流れ スレッド型サーバの問題 Node.jsのイベントループ SSRとイベントループの相性 APIフェッチの並列化 ストリーミングSSR よくある誤解 Node.jsはCPU処理が遅…

SSRとPWAは両立できる?キャッシュ階層で理解する

SSRとPWAは「相性が悪い」のではなく、キャッシュの担当範囲が違います Webアプリは実は多層キャッシュで動いている SSRのキャッシュは「HTMLのキャッシュ」 PWAのキャッシュは「リソースのキャッシュ」 なぜ「両立しない」と言われるのか 両立させる設計 HT…

SSRで状態を引き渡すDehydrationの正体

SSRのDehydrationは「HTMLを渡す技術」ではなく「状態を渡す技術」です Hydrationの前に必ず存在するDehydration Hydrationとは何をしている処理なのか なぜそれだけでは動かないのか Dehydrationの仕組み サーバはHTMLと一緒に「状態」を送っている Hydrati…

SPAでAPI設計が重要になる理由とBFFの役割

SPAでAPI設計が重要になる理由とBFF(Backend For Frontend)の役割 サーバレンダリング時代のデータの流れ SPAでは何が変わるのか なぜAPI設計がUIを壊すのか BFF(Backend For Frontend)とは何か BFFが必要になる具体的な場面 GraphQLとの関係 注意点:BF…

SSRとSSGの違いをビルド時レンダリングで整理

SSRとSSG(Static Site Generation)の違いをビルド時レンダリングの観点から整理する レンダリングのタイミングがすべてを決める SSRの動作 SSGの動作 なぜSSGがCore Web Vitalsに強いのか SSRのメリットと注意点 SSGの弱点 よくある誤解:SSRの方が高機能…

SPAとSSRの違いは描画場所ではない

SPAとSSRの違いは「描画場所」では説明できない SPAの責務:クライアントがアプリケーションになる SSRの責務:サーバがアプリケーションの主体 なぜ「描画場所」で説明すると誤解が起きるのか 責務分割が変わると何が変わるのか キャッシュ戦略** エラーの…