本章將介紹 Nuxt 如何在伺服器端獲取資料，實現真正的 SSR 和更好的 SEO。
1 核心概念 (Concept)
在傳統 Vue (SPA) 中，你通常會用 axios 在 onMounted 裡抓資料。這有個大缺點：
✗
SEO 差:
爬蟲機器人來的時候，頁面是空的 (因為資料還在 Loading)。
✗
效能差:
使用者要先下載完 JS，執行後才開始抓資料，等待時間長。
•
在伺服器端執行:
當使用者第一次進入頁面，Nuxt Server 會先抓好資料，把「有資料的 HTML」直接丟給瀏覽器 (SEO 滿分)。
•
防止重複抓取:
Nuxt 會把伺服器抓到的資料「打包」傳給瀏覽器 (Hydration)，瀏覽器直接拿來用，不會再發送第二次 API 請求。
語法結構:
// 不需要 import, 支援 Top-level await
const { data, pending, error } = await useFetch('/api/users')
你一次獲得了「資料本身」、「讀取狀態」和「錯誤訊息」。
2 給 Claude Code 的中文指令 (Prompt) Prompt
我們要用一個真實的假資料 API (JSONPlaceholder) 來模擬文章列表。
請複製以下指令給 Claude:
請建立一個展示 API 資料的頁面:
- 建立新頁面
app/pages/posts.vue。 - 在
<script setup>中,使用await useFetch('https://jsonplaceholder.typicode.com/posts')來抓取文章列表。 - 解構回傳物件,取得
data(重新命名為posts),pending,error。 - 在 template 中實作三種狀態的 UI:
- 當
pending為 true 時:顯示「資料載入中...」。 - 當
error存在時:顯示紅色錯誤訊息。 - 當有資料時:使用
<ul>和v-for列出前 10 篇文章的標題 (title)。
- 當
- 修改首頁
app/pages/index.vue,加入連往/posts的連結。
3 驗收重點 (Acceptance Criteria)
請檢查 Claude 完成後的結果:
•
體驗 Loading 狀態: 點擊首頁的 /posts 連結。如果你的網路很快,可能看不到「載入中...」。
•
確認資料顯示: 畫面應該要列出一排文章標題。
•
檢視原始碼 (SEO 驗證): 這是最關鍵的一步。請在 /posts 頁面按右鍵選「檢視網頁原始碼 (View Page Source)」。搜尋文章的標題文字。
如果找得到文字: 恭喜!這是 SSR (Server-Side Rendering),Google 爬蟲看得到你的內容。
如果找不到 (只有一堆 JS): 代表你的 useFetch 設定有誤或變成了 CSR 模式。
💡 架構師筆記 (Top-level Await)
注意看 Claude 寫的 code,你會發現 await useFetch 直接寫在 <script setup> 的最外層,不需要包在 async function 裡。
這是 Vue 3 的
<script setup> 搭配 Nuxt 的特異功能。Nuxt 會自動處理非同步的等待,確保資料抓完才渲染頁面(這也是為什麼它能做 SSR 的原因)。