AIクローラーはJavaScriptをレンダリングしますか？当サイトはReact製で心配です

結論から言うと、AIクローラーはほとんどJavaScriptをうまくレンダリングできません。詳しく解説します。

クローラーのJavaScript対応状況:

実際のところ:

コンテンツがJavaScript必須の場合:

• ほとんどのAIクローラーには見えません
• ChatGPTの回答で引用されません
• Perplexityは一部拾うが不安定
• AI可視性を失っている状態

解決策の優先度:

最良: サーバーサイドレンダリング（SSR）

• Next.jsのgetServerSideProps
• Nuxt.jsのSSRモード
• 初期HTMLにコンテンツを含める

良い: 静的サイトジェネレーション（SSG）

• 全ページをプリレンダリングHTML化
• ビルド時生成
• 変化の少ないコンテンツ向け

許容: プリレンダリングサービス

• Prerender.io等
• ボット検知しプリレンダHTMLを返す
• 複雑化・コスト増

AI可視性には不適:

• 完全クライアントサイドレンダリング
• ページロード後にAPIでコンテンツ取得
• 動的コンテンツにフォールバック無し

あなたの場合:

完全React SPA＝AIからほぼ見えません。AI可視性のためにはSSR移行がほぼ必須です。

私たちもこの移行を経験しました。学びを共有します。

移行前:

• Create React App（CRA）
• 全てクライアントレンダリング
• API駆動のコンテンツ取得

Next.jsへの移行:

期間: 50ページで6週間

主な手順:

1. Next.jsプロジェクト立ち上げ
2. コンポーネント移植（ほぼそのまま動作）
3. データ取得にgetServerSideProps実装
4. ルーティングをNext.js方式に
5. JS無効化でテスト
6. デプロイ・検証

課題:

• データ取得方法の大幅な変更
• クライアント専用ライブラリの代替検討
• ビルド時間増（SSRの負荷）
• キャッシュ戦略の再設計

結果:

AI可視性:

• 以前: トピック引用率5%
• 移行後: 28%
• Perplexityも安定して引用

SEO:

• First meaningful paint短縮
• Google順位もやや向上
• Core Web Vitals改善

やって良かった？

絶対に良かったです。3ヶ月で可視性向上分の効果を実感できました。

AIクローラーが実際に何を見ているかの確認方法。

テスト方法:

方法1: JavaScript無効化

ブラウザのDevToolsで:

• 設定 → Preferences → JavaScript無効化
• ページを表示
• これが多くのAIクローラーの見ているもの

方法2: Curl/Wget

curl https://yoursite.com/page

これで生のHTMLを取得。ここにコンテンツがなければAIも見えません。

方法3: サーバーログ確認

以下のリクエストを探す:

• GPTBot
• ClaudeBot
• PerplexityBot

レスポンスコードも確認。200で中身空＝問題有

方法4: Google Search Console

「レンダリングされたページ」機能を利用。ただしGoogleはJSレンダリングするが、理想的なクローラー可視性の指標。

方法5: AI可視性モニタリング

Am I Cited等で引用状況を追跡。良質コンテンツでも見えなければJSレンダリングが原因。

即時テスト:

主要コンテンツがcurlの出力で見えなければ問題あり。

AI可視性のためのNext.js実装ポイント。

重要なパターン:

コンテンツページの場合:

export async function getServerSideProps() {
  const data = await fetchContent();
  return { props: { data } };
}

コンテンツをサーバー側で取得し、初期HTMLに含めます。

静的コンテンツの場合:

export async function getStaticProps() {
  const data = await fetchContent();
  return {
    props: { data },
    revalidate: 3600 // ISRで1時間ごと再生成
  };
}

さらに良いのは、ビルド時プリレンダ。

よくあるミス:

1. 重要なコンテンツをuseEffectで取得

// NG - クライアントのみで取得
useEffect(() => {
  fetch('/api/content').then(setContent);
}, []);

2. メインコンテンツを遅延ロード

// AI的にNG - 初回レンダ後にロード
const Content = lazy(() => import('./Content'));

3. 動的ルートでフォールバック未設定

// OK - 未生成ページ用にフォールバック
export async function getStaticPaths() {
  return { paths: [...], fallback: 'blocking' };
}

鉄則:

AI可視性が重要なコンテンツは、必ず初期HTMLレスポンスに含めること。例外なし。

Vueユーザー向けNuxt.jsの観点。

原則は同じ:

SSRモード（Nuxt 3デフォルト）:

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true
})

useAsyncDataでのデータ取得:

const { data } = await useAsyncData('content',
  () => $fetch('/api/content')
);

サーバー側で実行、初期HTMLに含まれます。

静的生成:

npx nuxi generate

全ページを静的HTMLでプリレンダ。

Nuxtの利点:

• SSRがデフォルト
• ハイブリッド（静的/SSR混在）も可能
• Vue SPAからの移行も容易

検証方法:

同じくJS無効化でコンテンツ表示を確認。

Vue SPAの場合はNuxt移行がAI可視性への道です。

SSRのパフォーマンスについて。

トレードオフ:

SSRはサーバー負荷が増加:

• 各リクエストごとにページ生成
• CPU使用量増
• 適切なキャッシュが必須

対策:

CDN＋エッジキャッシュ:

Cache-Control: public, max-age=3600, stale-while-revalidate=86400

ボットもユーザーもレンダリング済みHTMLをキャッシュ配信。

Incremental Static Regeneration (ISR):

両取り可能:

• 静的ページで高速
• バックグラウンドで再生成
• コンテンツ系サイトに最適

エッジレンダリング:

Vercel Edge FunctionsやCloudflare Workers等:

• エッジでレンダリング
• レイテンシ低減
• ユーザーもボットも高速に

AIボット観点:

AIクローラーはパーソナライズ不要。思い切ってキャッシュしてOK:

• ボットUserAgent検知
• キャッシュHTML返却
• 十分新しければ可視性確保

パフォーマンスとAI可視性は両立可能:

SSR＝遅い、とは限りません。適切なキャッシュでAI可視性と高速化を両立できます。

AI可視性のためのCMSアーキテクチャ。

ヘッドレスの課題:

多くのヘッドレス構成では:

• CMSにコンテンツ保存
• フロントエンドがAPIで取得
• コンテンツはクライアントサイドロード

これだとAIクローラーには見えません。

解決アーキテクチャ:

CMS → ビルド/SSR層 → CDN → ユーザー/ボット
         ↓
    プリレンダHTML

実装例:

ビルド時の静的生成:

• CMSからビルド時に取得
• 静的HTML生成
• コンテンツ変更でリビルド

SSR＋キャッシュ:

• リクエスト時にCMSから取得
• サーバー側でレンダリング
• CDNでキャッシュ

CMSパターン例:

Contentful/Sanity + Next.js:

export async function getStaticProps() {
  const content = await cmsClient.getContent();
  return { props: { content }, revalidate: 60 };
}

WordPress + Gatsby:

• ビルド時に取得
• 静的サイト生成
• 公開時Webhookでリビルド

要点:

CMSの内容は、ページがAIクローラーに届く前にHTML化する必要があります。

このスレッドで全て解決できました。

学んだこと:

1. AIクローラーはJSをレンダしない - 当社SPAは彼らに見えない
2. SSRが唯一の解決策 - Next.js移行が王道
3. テストは簡単 - JS無効化、curl、ログ確認
4. 移行は現実的 - 6週間が目安
5. パフォーマンスも問題ない - キャッシュ・ISRで解決

今後の計画:

1. 現状テスト - curlでAI可視性問題を確認
2. チームに提案 - Next.js移行の事業案を提出
3. 重要ページから着手 - ブログや商品ページ優先
4. AI可視性を検証 - 移行後にAm I Citedで監視
5. 全体移行 - サイト全体へ展開

ビジネス的価値:

AI検索を使う米国人の70%以上に見えていません。6週間の移行で十分価値があります。

技術的に深いご回答に感謝します！