7月25日、Jono Alderson氏が「It’s time for modern CSS to kill the SPA」と題したブログ記事を公開し、海外で話題を呼んでいる。

この記事では、モダンCSSとブラウザ標準機能がシングルページアプリケーション（SPA）の利点を置き換え、マルチページアプリケーション（MPA）への回帰を促す潮流について詳しく紹介されている。以下に、その内容を紹介する。

「アプリのように見せたい」思考の罠

従来、サイトを“アプリらしく”見せる最も手軽な手段はSPA (Single Page Applications)だった。ReactやVueを使い、クライアント側でルーティングと描画を担わせる構成である。しかし著者は、そうした選択が実際には次のような問題を招くと指摘する。

• スクロール位置やフォーカスの不整合
• 読み込み中のスケルトン表示やレイアウトシフト
• ルーティング・ハイドレーション用スクリプトによる大きなJSバンドル
• SEO・アクセシビリティ対応の複雑化

プラットフォームの進化 ― View Transitions API

しかし、長らく続いたこの状況は一変しつつある。Chromium系ブラウザで実装が進む View Transitions API により、ページ間遷移のアニメーションを純粋なCSS宣言で実現できるようになった。

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: fade 0.3s ease both;
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

上記のCSSを各HTMLに挿入するだけで、白画面を挟まないクロスフェード遷移が得られる。さらにサムネイル→詳細画像といった共有要素トランジションも、要素へ同じ view-transition-name を付与するだけで完結する。

<!-- 一覧ページ -->
<a href="/product/red-shoes">
  <img src="/images/red-shoes-thumb.jpg" style="view-transition-name: product-image;">
</a>

<!-- 詳細ページ -->
<img src="/images/red-shoes-large.jpg" style="view-transition-name: product-image;">

Speculation Rules ― クリック前にページを先読みするには

遷移を「滑らか」にするだけでなく「瞬時」にするのが Speculation Rules である。リンクにホバーした時点でプリレンダを開始し、実際のクリック時には実質0秒でページを表示する。

<script type="speculationrules">
{
  "prerender": [
    { "where": { "selector_matches": "a" } }
  ]
}
</script>

SPA vs MPA ― パフォーマンス比較

典型的なSPAとモダンなMPAサイトを比較すると以下のような対比が得られる。

結論 ― 「ウェブをウェブとして作る」

SPAは一時的な制約への“巧妙な回避策”に過ぎず、その制約はすでに解消された。ネイティブ遷移、先読み、バックフォワードキャッシュなど、ブラウザは シンプルで宣言的なページ を最適化する方向へ進化している。著者は次のように総括する。

• まずHTMLとCSSで構築し、必要に応じて最小限のJSを「後乗せ」しよう。
• クライアントルーティングや全面的なハイドレーションは本当に必要な場合だけ採用しよう。
• パフォーマンス・アクセシビリティ・メンテナビリティの三拍子を満たす最短ルートは「ブラウザの標準を活用すること」だ。

モダンCSSと標準APIの活用により、SPAに頼らずとも高速かつリッチな体験を実現できる時代が到来した。フロントエンドエンジニアは「アプリのように振る舞わせるために大量のJSを抱え込む」前提をいま一度見直すべき段階に来ているのではないだろうか。

詳細はIt's time for modern CSS to kill the SPAを参照していただきたい。