為網站裝上電話線 (資料獲取心法)
一個網站如果不能跟外界溝通、獲取新資料，就像一座孤島。今天，我們要來為網站「接上電話線」，學習如何從遠方伺服器 (API) 獲取資料。
1. 為什麼不能直接用 fetch? —「重複點餐」問題
在一般的純前端專案中，我們可能會用瀏覽器內建的 fetch 來要資料。但在 Nuxt (一個全端框架) 中，這樣做會出問題。
比喻一下：
想像您去一家高科技餐廳。在您進門時，服務生 (Nuxt 伺服器) 已經預先為您點好了一份套餐，並準備好要端上桌。 但當您坐到位置上後，您自己 (Nuxt 客戶端) 又拿出手機，點了一模一樣的套餐。
這就是「重複獲取 (Double Fetching)」，同一份資料被請求了兩次，一次在伺服器，一次在客戶端。這會浪費網路資源，也可能導致頁面顯示錯亂。
2. Nuxt 的聰明解法 —「外帶餐盒 (Payload)」
Nuxt 的解決方法很聰明。
延續比喻：
服務生 (伺服器) 點完餐後，不會立刻上菜，而是會把餐點用一個「外帶餐盒 (Payload)」打包好，連同您的座位資訊 (HTML) 一起送到您的桌上。 當您坐到位置上後 (客戶端)，您會先看看桌上有沒有這個餐盒。如果有，就直接打開來吃，不需要再點一次餐。
這個「外帶餐盒」機制，就是 Nuxt 確保資料只會被獲取一次的核心魔法。
3. Nuxt 的三大神器 — 該用哪一個？
為了實現這個魔法，Nuxt 提供了三種主要工具，它們各有不同的使用時機：
$ $fetch (手動打電話)
定位：最單純、最直接的工具。
時機：適合用在使用者互動後才觸發的請求。例如，使用者填完表單後，按下「送出」按鈕。它不會使用「外帶餐盒」機制。
F useFetch (自動訂餐系統)
定位：我們最常用的主力，90% 的情況下用它就對了。
時機：適合在一進入頁面就需要顯示的資料。例如，文章列表、商品資訊。它會自動處理好所有「外帶餐盒」的麻煩事。
A useAsyncData (萬能主廚)
定位：最強大、最靈活的工具，是 useFetch 的內核。
時機：當您的資料來源不是一個簡單的 API 網址，而是需要執行更複雜的非同步邏輯時（例如，使用第三方的 SDK 或存取本地資料庫），就換這位主廚上場。
今日總結
今天我們建立了三個關鍵觀念：
在 Nuxt 中直接用 fetch 會導致重複獲取的問題。
Nuxt 透過「Payload」機制來解決這個問題，確保資料只被獲取一次。
我們有三種工具 ($fetch, useFetch, useAsyncData)，各有其最適合的使用場景。
觀念清楚了，明天我們就來實際動手，深入學習最好用的主力工具 useFetch！