2026/03/31

SPA

1つの HTML ページの中でコンテンツを動的に書き換えることで動作する Web アプリのこと

MPA（Multi Page Application）

従来の Web 形式
毎回「対象のページ」をもらうイメージ
ページを表示させようとするたびに、サーバー側で用意＆画面 “全体” を再度描画する必要がある

SPA（Single Page Application）

最初に「全部入りのページ」をもらうイメージ
最初にまるごともらっておいて、あとは必要な情報だけサーバー側から取得＆“画面の一部”を更新する

CSR（Client Side Rendering）
クライアント（ブラウザ）側で JavaScript を使って HTML を組み立てるレンダリング手法のこと

従来との違い

メリット

ユーザー体験（UX）が高い

画面遷移のたびにページ全体がリロードされないため、スムーズな操作感を実現できる

例：地図サービスなど
→ ページ遷移してもチラつきがなく、素早く動作する

フロントエンドとバックエンドを完全に分離できる

サーバーは HTML を生成する必要がなく API（JSON）を返すだけでよい

同じ API をモバイルアプリにも使い回せる

API を中心に設計するため、Web と iOS/Android が同じ API を共有できる

部分的なデータ更新でサーバー負荷を下げられる

ページ全体の HTML をサーバーで生成する必要がなくなるため、サーバーの処理負荷を下げられる

デメリット

初回読み込みが遅い

JavaScript バンドル（bundle）をまとめてダウンロードするため、初回表示までの時間が MPA より長くなる

対策：
├ コード分割（Code Splitting）：使うページのコードだけ読み込む
├ 遅延読み込み（Lazy Loading）：必要になったタイミングで読み込む
└ SSR（サーバーサイドレンダリング）と組み合わせる

SEO 対策が難しい

従来の SPA は JavaScript が実行されてから HTML が生成されるため、クローラー（検索エンジンのbot）がコンテンツを読み取れないことがある

対策：
├ SSR（Next.js/Nuxt）でサーバー側で HTML を生成する
└ SSG（静的サイト生成）でビルド時に HTML を生成する

JavaScript が無効な環境では動かない

JavaScript を無効にしているブラウザや環境では動作しない

対策：
├ SSR（Next.js/Nuxt）でサーバー側で HTML を生成する
└ SSG（静的サイト生成）でビルド時に HTML を生成する

セキュリティ上の考慮点が増える

クライアントサイドで多くのロジックが動くため、以下の点を注意する必要がある

・XSS対策
・認証トークンの安全な保持（localStorage, Cookie）
・API の CORS 設定 etc.

主要フレームワーク

メタフレームワーク（SSR・SSG統合）

CSR のデメリット（SEO・初回ロード）を解消するために、フレームワークの上に SSR・SSG 機能を追加したフレームワーク

参考

• React：https://react.dev
• Next.js：https://nextjs.org
• Vue.js：https://ja.vuejs.org
• Nuxt：https://nuxt.com
• Astro：https://docs.astro.build/en/getting-started/