ถ้าข้อมูลเปลี่ยนบ่อยใน useAsyncData — ควรจัดการยังไงดี? ⚡

ใน Nuxt 3 เราชอบใช้ useAsyncData() ดึงข้อมูลจาก API เพราะมัน cache ให้เราอัตโนมัติ แต่ถ้าข้อมูลเปลี่ยนบ่อย เช่น รายการออเดอร์ใหม่
ยอดขายที่อัปเดตตลอดเวลา สถานะคำสั่งซื้อที่เปลี่ยนทุกไม่กี่วินาที
ถ้าใช้ useAsyncData() ตรง ๆ มันจะไม่โหลดใหม่ทันทีนะ
เพราะมันจำค่าไว้ใน cache เพื่อให้ SSR เร็วขึ้น

ใช้ refresh() โหลดใหม่เมื่ออยากอัปเดต

<script setup>
const { data, refresh, pending } = await useAsyncData('orders', () =>
  $fetch('/api/orders')
);
</script>

<template>
  <button @click="refresh()">โหลดข้อมูลล่าสุด</button>
  <div v-if="pending">กำลังโหลด...</div>
  <pre>{{ data }}</pre>
</template>

ใช้ watch() ดูค่าที่เปลี่ยน แล้ว refresh อัตโนมัติ

const status = ref('pending');
const { data, refresh } = await useAsyncData('orders', () =>
  $fetch(`/api/orders?status=${status.value}`)
);

watch(status, () => refresh());

ใช้ { server: false } เพื่อให้ fetch ใหม่ฝั่ง client ทุกครั้ง

await useAsyncData('live', () => $fetch('/api/live'), {
  server: false,
});

เขียนโดย: Tanarat Sudjai

Nuxt3 #Vue3 #DevTips #FrontendDev #TanaratDev