Vite SPA 站要怎麼做預渲染才會被 ChatGPT 引用？

Vite SPA 必須用 vite-plugin-prerender 或 react-snap 在 build 時為每條路由產生靜態 HTML，否則 AI 爬蟲只看到空殼永遠不引用。

ChatGPT、Perplexity、Google AI Overview 的爬蟲多數不執行 JavaScript（或只執行極簡 fallback）。Vite + React 預設是 CSR（Client-Side Rendering），index.html 內 <div id="root"></div> 為空，AI 抓回去就是一片空白。

解決方案有三種：①最快：用 vite-plugin-prerender，在 vite.config.ts 列出所有路由，build 後 dist/ 內每條路由皆有完整 HTML；②react-snap：使用無頭瀏覽器抓取所有路由再寫回靜態 HTML；③遷移至 SSR 框架：Next.js / Remix / Astro。GEO 短期建議走方案 ① 或 ②，遷移成本最低。

驗證方式：build 後執行 `curl https://yoursite/feat/faq/your-slug` 確認 HTML 內含完整內容、title、meta、JSON-LD；若仍是空殼則預渲染未生效。

重點

• Vite SPA 預設 CSR，AI 爬蟲看到空殼
• 首選 vite-plugin-prerender / react-snap
• 用 curl 驗證每條路由 HTML 完整性

相關內容

• [glossary] 預渲染（Prerender） — 預渲染是在建置時把 SPA 路由產生靜態 HTML，讓 AI 爬蟲與搜尋引擎可直接讀取內容，是 SPA 站做 GEO 的必備前置作業。
• [glossary] SSR vs CSR 差異 — SSR（Server-Side Rendering）伺服端產生完整 HTML、CSR（Client-Side Rendering）瀏覽器端 JS 渲染；GEO
• [faq] React SPA 怎麼做 GEO？ — 純 React SPA 對 AI 爬蟲幾乎隱形。三條解法：導入 SSR 框架（Next.js/Remix）、用 react-snap 或 prerender.i
• [blog] 閱讀完整指南：三平台引用邏輯（ChatGPT/Perplexity/Gemini） — 三大 AI 搜尋引擎的引用邏輯有何差異？本文深度比較 ChatGPT、Perplexity、Gemini 三平台的爬蟲機制、引用偏好、答案生成邏輯，提供每個平台