Client Directives Performance Demo

Open browser DevTools Network and Performance panels to observe the differences

1️⃣ client:load - Immediate Loading

⚡ Pros: Component immediately available

⚠️ Cons: May delay FCP by 200-500ms

📊 Use case: Critical above-the-fold interactive features

目前的數字：0

2️⃣ client:idle - Load When Browser Is Idle ⭐

⚡ Pros: Doesn't block initial render, improves FCP by 40%

⚡ Pros: Uses requestIdleCallback API

📊 Use case: Secondary interactive features (product filters, search boxes)

目前的數字：0

3️⃣ client:visible - Load When Entering Viewport

⚡ Pros: Saves 70-90% JavaScript (if not seen, not loaded)

⚡ Pros: Uses IntersectionObserver API

📊 Use case: Below-the-fold components (carousels, comment sections)

💡 Tip: Scroll down to see it load!

↓ Keep scrolling down ↓

目前的數字：0

4️⃣ No client directive - Pure Static HTML ✨

⚡ Pros: 0 KB JavaScript, instant display

⚡ Pros: Best SEO and performance

⚠️ Cons: Buttons are not clickable (no JavaScript)

📊 Use case: Pure display content (Layout, footer, text)

目前的數字：0

🔍 How to Observe Differences

  1. 1. Open Chrome DevTools (F12)
    • → Network panel: Observe JavaScript file loading timing
    • → Performance panel: Record page loading process
  2. 2. Refresh page and observe
    • → client:load Counter will load JS immediately
    • → client:idle Counter will load later (usually 50-200ms)
    • → client:visible Counter only loads when scrolled to
    • → No directive Counter doesn't load any JS
  3. 3. Test interactivity
    • → Try clicking each counter's buttons
    • → The last one (no directive) cannot be clicked!

💡 Best Practices

✅ Recommended

  • • Navigation menu → client:load
  • • Product filter → client:idle ⭐
  • • Footer carousel → client:visible
  • • Layout/text → No directive

❌ Avoid

  • • Using client:load for all components
  • • Using client:only for critical features
  • • Using client:visible for above-the-fold
  • • Using client:only for SEO content