預先烤好的蛋糕 (Prerendering)
我們在 Day 22 學到，Nuxt 預設會在使用者來訪時，「即時」在伺服器上渲染頁面 (SSR)。但有些頁面內容很少變動，例如「關於我們」或部落格文章。如果每次有人來都要重新「現做」一次，似乎有點浪費。
今天，我們來學習一種更高效能的方式：預先渲染 (Prerendering)。
1. 什麼是預先渲染？
讓我們用一個麵包店的比喻來理解：
即時渲染 (SSR)
像是現做的蛋糕。客人點餐後，廚師才開始從麵粉開始製作。蛋糕很新鮮，但客人需要花時間等待。
預先渲染 (Prerendering)
像是架上的麵包。麵包師傅在開店前，就先把今天所有要賣的麵包都預先烤好放在架上。客人一來，直接拿了就走。速度極快！
核心概念：Prerendering 就是在建置階段 (build time)，就把您的頁面都產生好，變成一個個真實的 HTML 檔案。當使用者訪問時，伺服器直接把這個現成的檔案傳給他，完全不需要即時運算。
2. Nuxt 如何預先渲染？
第一步：執行 generate 指令
我們要執行一個特別的指令，而不是 nuxt build：
npx nuxt generate第二步：讓「爬蟲」開始工作
執行後，Nuxt 會啟動一個「網路爬蟲 (Crawler)」。
這個爬蟲會從您的首頁 (/) 開始，找出頁面上所有的連結 (<NuxtLink>)，然後一個個去訪問，再從那些頁面找出更多連結... 直到把所有能從首頁連到的頁面都「逛」過一遍為止。
每逛到一個頁面，它就會拍下一張「快照」（產生 HTML 檔案），存到 .output/public 這個資料夾。這個資料夾就是您最終「烤好」的整個靜態網站，可以直接部署到任何靜態主機上。
3. 如果爬蟲找不到怎麼辦？
這個爬蟲很聰明，但如果有些頁面沒有被任何地方連結到（例如一個隱藏的活動頁，或是一個 sitemap.xml），爬蟲就找不到它。
這時，我們可以在 nuxt.config.ts 中，透過 routeRules 手動給它一張「必烤清單」。
// nuxt.config.ts
export default defineNuxtConfig({
routeRules: {
// 告訴 Nuxt，/blog/ 下的所有頁面都應該被預先渲染
'/blog/**': { prerender: true },
// 這個管理後台頁面不用預先渲染，保持即時渲染 (SSR)
'/admin/**': { prerender: false },
// 這個 RSS 檔案也要預先產生
'/rss.xml': { prerender: true },
}
})精準控制：這樣您就能精準控制哪些頁面要預先烤好，哪些要保持現做。
實際應用場景
適合預先渲染
- 部落格文章
- 產品介紹頁面
- 公司資訊頁面
- 說明文件
- 行銷頁面
不適合預先渲染
- 會員儀表板
- 購物車頁面
- 即時聊天功能
- 個人化內容
- 管理後台
今日總結
今天我們學會了 Prerendering，一個能大幅提升網站效能的技巧。透過 npx nuxt generate，我們可以像烤麵包一樣，預先把頁面都準備好。
極致效能：預先渲染提供最快的載入速度
在建置時就產生好 HTML 檔案，使用者訪問時直接傳送
智慧爬蟲：自動掃描所有可連結的頁面
從首頁開始遞歸掃描所有連結，自動產生靜態頁面
精準控制：透過 routeRules 客製化渲染策略
手動指定哪些頁面需要預先渲染，哪些保持動態
對於內容不常變動的頁面（部落格、文件、行銷頁面），預先渲染是絕佳的選擇。這也是實現我們 Day 22 提到的「混合渲染」的核心技術之一，讓您的網站兼具效能與彈性。