Prerendering
Prerendering 在建置期把路由輸出成靜態 HTML，兼顧 CSR 的互動與 SEO 的可索引性。
定義
Prerendering 指在 build 時跑一次路由渲染，把每個 URL 的 HTML 產出成靜態檔案。它常用於 React Router 的網站：部署後先給 HTML（對 SEO 友善），再由前端 hydration 接手互動（保留 SPA 體驗）。
為什麼重要
- 每路徑有 HTML：爬蟲更容易抓取與理解頁面內容
- 速度快：CDN 可直接回應靜態檔案，TTFB 極低
- 不必全站 SSR：對內容站通常更划算，節省伺服器成本
- SEO 友善：確保搜尋引擎能抓到完整的 HTML 結構與 meta
- 相容性佳：任何靜態 hosting（Cloudflare Pages、Netlify）都支援
- 可搭配 CSR：保留 SPA 的互動體驗，不犧牲使用者操作流暢度
- 易於除錯：build 時就能看到每頁的輸出，問題更早發現
怎麼做（實作重點）
- 列出要 prerender 的路由（首頁、教學、工具、詞彙）
- 確保 head 是 route-aware（title/canonical/hreflang/schema）
- 避免部署層用 SPA catch-all 覆蓋掉每路徑 index.html
- 使用 react-snap、vite-plugin-ssr 或自行撰寫 prerender script
- 每路徑輸出獨立 index.html 至對應資料夾（如 /glossary/seo/index.html）
- 確保 JSON-LD 與 Open Graph 在 prerender 階段就嵌入
- build 後驗證：curl 各路徑確認 HTML 完整、status 200
範例
html
// scripts/prerender.ts
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import App from '../src/App';
import fs from 'fs';
const routes = ['/', '/glossary/seo', '/tools/sitemap'];
for (const route of routes) {
const html = renderToString(
<StaticRouter location={route}>
<App />
</StaticRouter>
);
const dir = `dist${route}`;
fs.mkdirSync(dir, { recursive: true });
fs.writeFileSync(`${dir}/index.html`, `<!DOCTYPE html>${html}`);
}html
// package.json
{
"scripts": {
"build": "vite build",
"postbuild": "react-snap"
},
"reactSnap": {
"source": "dist",
"inlineCss": true,
"puppeteerArgs": ["--no-sandbox"]
}
}相關連結
常見問題
關於這個詞彙的常見問答。