React SPAがAIに見えない理由 — CSRの致命的な問題とSSR移行のすすめ

CSRの致命的な問題

React SPAはブラウザ上でJavaScriptを実行してコンテンツを描画します。しかし、AIクローラーの多くはJavaScriptを実行しません。

つまり、AIクローラーが見ているのは空の

だけです。

AIOスコアへの影響

AIO Scoreの「サーバーサイドレンダリング」項目では、HTMLの中身を確認しています。CSRのSPAは、この項目で最低点（2/8）になります。

解決策: SSRへの移行

Next.js

React SPAからNext.jsへの移行は比較的容易です。App Routerを使えば、デフォルトでServer Componentsが有効になります。

Remix

RemixもSSRをデフォルトで提供します。React Routerベースなので、既存のルーティング構造を維持しやすいです。

既存SPAでの対処法

完全移行が難しい場合は、以下の対処法があります：

プリレンダリング: react-snap等でビルド時にHTMLを生成

動的レンダリング: Rendertron等でクローラー向けに別HTMLを返す

重要ページのみSSR: LP、料金ページなどのSEO/AIO重要ページだけSSR化

まとめ

CSRのSPAはAI検索時代に大きなハンディキャップです。SSRへの移行を検討することで、AIOスコアを大幅に改善できます。