Client Directives 效能示範
開啟瀏覽器開發者工具的 Network 和 Performance 面板來觀察差異
1️⃣ client:load - 立即載入
⚡ 優點：元件立即可用
⚠️ 缺點：可能延遲 FCP 200-500ms
📊 適用：關鍵的 above-the-fold 互動功能
目前的數字：0
2️⃣ client:idle - 瀏覽器閒置時載入 ⭐
⚡ 優點：不阻擋初始渲染，改善 FCP 40%
⚡ 優點：使用 requestIdleCallback API
📊 適用：次要互動功能（產品篩選器、搜尋框）
目前的數字：0
3️⃣ client:visible - 進入視窗時載入
⚡ 優點：節省 70-90% JavaScript（未見不載入）
⚡ 優點：使用 IntersectionObserver API
📊 適用：below-the-fold 元件（輪播、評論區）
💡 提示：捲動到下方才會看到載入！
↓ 繼續向下捲動 ↓
目前的數字：0
4️⃣ 無 client directive - 純靜態 HTML ✨
⚡ 優點：0 KB JavaScript，即時顯示
⚡ 優點：最佳 SEO 和效能
⚠️ 缺點：按鈕無法點擊（沒有 JavaScript）
📊 適用：純展示內容（Layout、頁尾、文字）
目前的數字：0
🔍 如何觀察差異
- 1. 開啟 Chrome DevTools (F12)
- → Network 面板：觀察 JavaScript 檔案載入時機
- → Performance 面板：錄製頁面載入過程
- 2. 重新整理頁面並觀察
- → client:load 的 Counter 會立即載入 JS
- → client:idle 的 Counter 會稍後載入（通常 50-200ms）
- → client:visible 的 Counter 只有捲動到該處才載入
- → 無 directive 的 Counter 完全沒有載入 JS
- 3. 測試互動性
- → 嘗試點擊每個計數器的按鈕
- → 最後一個（無 directive）無法點擊！
💡 實戰建議
✅ 推薦做法
- • 導覽選單 → client:load
- • 產品篩選器 → client:idle ⭐
- • 頁尾輪播 → client:visible
- • Layout/文字 → 無 directive
❌ 避免做法
- • 所有元件都用 client:load
- • 關鍵功能用 client:only
- • above-the-fold 用 client:visible
- • 需要 SEO 的內容用 client:only