<script setup lang="ts">
// サーバー:SSR中にデータを取得
// クライアント:事前取得済みデータを使用, 重複リクエストなし
const { data: products } = await useFetch('/api/products')
</script>

<!-- pages/products/index.vue -->
<template>
  <div>
    <h1>商品</h1>
    <div v-if="pending">読み込み中...</div>
    <div v-else-if="error">商品の読み込みに失敗しました</div>
    <div v-else>
      <ProductCard v-for="p in products" :key="p.id" :product="p" />
    </div>
  </div>
</template>

<script setup lang="ts">
const { data: products, pending, error } = await useFetch('/api/products')
</script>

// 実行成功

<script setup lang="ts">
const { data: stats } = await useAsyncData('product-stats', async () => {
  // カスタムデータ取得ロジック
  const [total, featured, onSale] = await Promise.all([
    $fetch('/api/products/count'),
    $fetch('/api/products/featured'),
    $fetch('/api/products/on-sale')
  ])
  return { total, featured, onSale }
})
</script>

// 実行成功

<script setup lang="ts">
// $fetchは一回きりのリクエスト用 (SSR payload不要)
async function submitOrder() {
  const order = await $fetch('/api/orders', {
    method: 'POST',
    body: { items: cart.value, total: totalPrice.value }
  })
  navigateTo(`/orders/${order.id}`)
}
</script>

// 実行成功

// server/api/products/index.get.ts
export default defineEventHandler(async (event) => {
  // サーバーハンドラ内では$fetchが正しい選択
  const query = getQuery(event)
  const products = await $fetch('https://api.supplier.com/products', {
    params: { category: query.category }
  })
  return products
})

// 実行成功

<template>
  <div>
    <h1>おすすめ商品</h1>
    <!-- lazy:バックグラウンドでデータを読み込み, ページは即時レンダリング -->
    <div v-if="pending">おすすめを読み込み中...</div>
    <div v-else>
      <ProductCard v-for="p in recommendations" :key="p.id" :product="p" />
    </div>
  </div>
</template>

<script setup lang="ts">
const { data: recommendations, pending } = await useFetch('/api/recommendations', {
  lazy: true
})
</script>

// 実行成功

<script setup lang="ts">
// Transform:保存前にデータを処理
const { data: products } = await useFetch('/api/products', {
  transform: (data: any[]) => {
    return data.map(p => ({
      ...p,
      formattedPrice: new Intl.NumberFormat('en-US', {
        style: 'currency', currency: 'USD'
      }).format(p.price)
    }))
  }
})

// Pick:特定フィールドのみ抽出 (payloadサイズを削減)
const { data: productNames } = await useFetch('/api/products', {
  pick: ['id', 'name', 'price']
})
</script>

// 実行成功

<script setup lang="ts">
// SSRフェッチをスキップ - クライアント側のみフェッチ
const { data: userWishlist } = await useFetch('/api/wishlist', {
  server: false,
  default: () => [] // データ読み込み前のデフォルト値
})
</script>

// 実行成功

<template>
  <div>
    <h1>商品</h1>
    <button @click="refresh()" :disabled="pending">
      {{ pending ? 'リフレッシュ中...' : 'リフレッシュ' }}
    </button>
    <ProductCard v-for="p in products" :key="p.id" :product="p" />
  </div>
</template>

<script setup lang="ts">
const { data: products, pending, refresh } = await useFetch('/api/products')
</script>

// 実行成功

<template>
  <div>
    <select v-model="selectedCategory">
      <option value="all">すべて</option>
      <option value="electronics">エレクトロニクス</option>
      <option value="clothing">衣類</option>
    </select>
    <ProductCard v-for="p in products" :key="p.id" :product="p" />
  </div>
</template>

<script setup lang="ts">
const selectedCategory = ref('all')

// selectedCategoryが変更されると自動再フェッチ
const { data: products } = await useFetch('/api/products', {
  query: { category: selectedCategory },
  watch: [selectedCategory]
})
</script>

// 実行成功

<script setup lang="ts">
const { data: stock, refresh } = await useFetch('/api/stock/live', {
  server: false // クライアント専用ポーリング
})

// 30秒ごとにポーリング
const pollInterval = setInterval(() => {
  refresh()
}, 30000)

onUnmounted(() => clearInterval(pollInterval))
</script>

// 実行成功

<!-- pages/products/index.vue -->
<template>
  <div class="product-list-page">
    <h1>MegaShop商品</h1>

    <!-- フィルター -->
    <div class="filters">
      <select v-model="filters.category" @change="applyFilters">
        <option value="">全カテゴリ</option>
        <option value="electronics">エレクトロニクス</option>
        <option value="clothing">衣類</option>
        <option value="home">ホーム＆ガーデン</option>
      </select>
      <select v-model="filters.sort">
        <option value="popular">人気順</option>
        <option value="price-asc">価格:安い順</option>
        <option value="price-desc">価格:高い順</option>
      </select>
    </div>

    <!-- 読み込み中状態 -->
    <div v-if="pending" class="loading">商品を読み込み中...</div>

    <!-- エラー状態 -->
    <div v-else-if="error" class="error">
      商品の読み込みに失敗しました。<button @click="refresh()">再試行</button>
    </div>

    <!-- 商品グリッド -->
    <div v-else class="product-grid">
      <ProductCard
        v-for="p in products"
        :key="p.id"
        :product="p"
        @add-to-cart="addToCart"
      />
    </div>

    <!-- ページネーション -->
    <div class="pagination">
      <button :disabled="page <= 1" @click="page--">前へ</button>
      <span>{{ page }}ページ</span>
      <button @click="page++">次へ</button>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Product {
  id: number; name: string; price: number; image: string
}

const page = ref(1)
const filters = reactive({
  category: '',
  sort: 'popular'
})

// リアクティブクエリ付きSSR事前取得
const { data: products, pending, error, refresh } = await useFetch<Product[]>('/api/products', {
  query: computed(() => ({
    page: page.value,
    category: filters.category || undefined,
    sort: filters.sort
  })),
  default: () => [],
  transform: (data: Product[]) => data.map(p => ({
    ...p,
    formattedPrice: `$${p.price.toLocaleString()} USD`
  }))
})

const cart = useState<Product[]>('cart', () => [])
function addToCart(product: Product) {
  cart.value.push(product)
}

function applyFilters() {
  page.value = 1
  refresh()
}

// ページ変更を監視して自動リフレッシュ
watch(page, () => refresh())
</script>