Ở phần trước mình đã trình bày về useFetch và useAsyncData rồi. Nếu bạn nào tò mò thì có thể xem ở đây nhé Data fetching trong Nuxt 3 (phần 1). Bài viết này mình sẽ nói nốt về useLazyFetch và useLazyAsyncData. Về cơ bản useLazyFetch và useLazyAsyncData nó không khác so với useFetch và useAsyncData lắm đâu nên có thể dung lượng của bài viết khá là ngắn nên mình nói thêm về tạo skeleton cho app vì nó cũng "hơi hơi" liên quan đến trải nghiệm load data của người dùng. Có thể từ "skeleton" các bạn biết là gì rồi hoặc với các bạn chưa biết thì nó là cái mà hiển thị thay khi mà data bạn chưa load ra đó. Nó sẽ trông như thế này

Và không dài dòng nữa mình sẽ vào bài hôm nay ngay đây.

1. useLazyFetch

Cách viết của useLazyFetch thì cũng giống useFetch thôi vì cơ bản nó chính là useFetch với option lazy: true.

<script setup>
    const { pending, data: count } = await useLazyFetch('/api/count')
</script>
<template>
    <div>
        Page visits: {{ count }}
    </div>
</template>

Với cách load data này thì việc bất đồng bộ sẽ được thực thi. Nuxt sẽ tìm nạp dữ liệu song song với việc chạy các đoạn mã nguồn đằng sau đó, không giống như useFetch là đợi đến khi useFetch thực hiện xong mới thực hiện tiếp tục các đoạn code đằng sau. Cái nào cũng có hai mặt của nó. Với cách dùng này thì ưu điểm là app của các bạn sẽ load nhanh hơn một chút nhưng vì là bất đồng bộ nên ta sẽ phải cẩn thận hơn ở đoạn code phía sau nếu có dùng lại data từ useFetch để thực thi một công việc gì đó nếu không sẽ dễ gây lỗi vì lúc này data đang là null. Thuộc tính pending để xác định xem data đã được load xong chưa (pending = true khi data chưa được load xong và ngược lại). Và để tạo skeleton với useLazyFetch thì rất đơn giản thôi. Chúng ta chỉ cần check điều kiện theo biến pending là xong.

<script setup>
    const { pending, data: count } = await useLazyFetch('/api/count')
</script>
<template>
    <div v-if="pending">
        <Skeleton />
    </div>
    <div>
        Page visits: {{ count }}
    </div>
</template>

2. useLazyAsyncData

useLazyAsyncData cũng tương tự như useAsyncData nhưng với option lazy: true. Cách triển khai thì cũng giống như useAsyncData:

const { pending, data: post } = await useLazyAsyncData('post', () => getPost())

Thuộc tính pending cũng để xác định xem quá trình load data đã xong chưa.

3. Tạo skeleton trong mode server side

Như trên mình cũng nói qua về skeleton khi sử dụng với useLazy rồi nhưng với useAsyncData và useFetch thì sao. Nếu mà dùng thuộc tính pending như useLazy thì mình đã thử nhưng không được vì useAsyncData hay useFetch sẽ được ưu tiên thực hiện trước nên thuộc tính pending lúc nào cũng là false. Vậy nên về ý tưởng thì ta sẽ tạo ra một biến khi page bắt đầu được load và thay đổi giá trị của biến này khi page đã được load xong. Để thực hiện công việc này thì chúng ta sử dụng nuxt hook đó là page:start và page:finish như dưới đây.

<template>
    <div v-if="pending">
        <Skeleton />
    </div>
    <div v-for="post in posts" :key=post.id>
        {{ post.title }}
    </div>
</template>
<script setup lang="ts">
  const nuxtApp = useNuxtApp();
  const pending = ref(false);
  const { data:post } = await useAsyncData('post', () => getPost())
  nuxtApp.hook("page:start", () => {
    pending.value = true;
  });
  nuxtApp.hook("page:finish", () => {
    pending.value = false;
  });
</script>

Như vậy là mình đã giới thiệu khái quát về data fetching trong nuxt 3 rồi, hi vọng bài viết của mình giúp ích được phần nào cho các bạn đang mới tìm hiểu về nuxt 3. Trong quá trình viết không thể tránh khỏi những sai sót, rất mong được nhận sự góp ý từ các bạn. Và cuối cùng là cảm ơn các bạn đã giành thời gian xem, nếu yêu quý mình thì các bạn có thể theo dõi để đón xem các bài viết tiếp theo của mình nhé.