useAsyncData vs. useLazyAsyncData in Nuxt 3

Question

To my understanding the difference should be that the non-lazy variant blocks the navigation to the page until the promise resolved.

My sample page is pretty simple:

<!-- slow.vue -->
<template>
  <div>
    data: {{ data }} <br />
    pending: {{ pending }}
  </div>
</template>

<script setup>
const { data, pending } = useAsyncData(async () => {
  await new Promise((resolve) => setTimeout(resolve, 2000))
  return 42
})
</script>

However, what I experience in reality:

• If I enter the URL and directly load the site ( http://localhost:3000/slow ), it get's server side rendered and loads only after 2s waiting and shows data: 42 and pending: false . Great.
• If I navigate to this page from another one ( <NuxtLink to="/slow">...</NuxtLink> ), so if it gets rendered on client side, nothing is blocked. I immediately see no data and pending: true . After 2s it shows pending: false and the data. That's not what I would expect.

If I switch to useLazyAsyncData the behaviour is exactly the same. Is this a bug or am I misunderstanding the proper usage?

Answer 1

just a guess.. but i think why you already see something when navigating from another page is because the "app shell" is already loaded and the app does not have to wait until the shell and some other data is computed and ready to be sent to the client

Answer 2

Stupid mistake: You have to use await useAsyncData for it to work properly.