Nuxt•10mo ago

How can I correctly display a loading screen without blocking the route in Nuxt3?

Hi! I've encountered an unresolved issue while developing with Nuxt 3. In my project, each page has content that must be rendered only after the top-level setup requests are completed. However, I don't want to use useFetch, as it causes requests pending and blocks the route. My expectation is for the route to immediately navigate and display a loading page until the request is complete, and then render the complete page. Yes, I know lazy loading can prevent route blocking, but it brings up the first issue. I want to ensure SSR functionality on each page, but server-side doesn't trigger watch(which I use lazy fetch to make sure request done.), forcing me to use watchImmediate to ensure the expected HTML is correctly generated during SSR and sent to the client-side. However, this approach leads to another issue. On the client side, when a page is re-entered for the second time (for example, requesting an offset form), because the last request depends on the payload, during the page's script phase, watchImmediate observes the data from the payload (i.e., the data from the first successful request) and immediately assumes the data has been requested.

const { data, pending } = await useLazyFetch('/api/list')
const list = ref([])
//When re-entered, isLoading will be false first, because ref on payload which already has data from first entered
const isLoading = computed(() => pending.value)

watch(pending, (pending) => {
  if (!pending)
    list.value = data.value || { list: [], startAt: Date.now() }
}, { immediate: true })

const { data, pending } = await useLazyFetch('/api/list')
const list = ref([])
//When re-entered, isLoading will be false first, because ref on payload which already has data from first entered
const isLoading = computed(() => pending.value)

watch(pending, (pending) => {
  if (!pending)
    list.value = data.value || { list: [], startAt: Date.now() }
}, { immediate: true })

This results in the initial appearance of the first entry page's value (from the payload) until the second request succeeds and refreshes the data. This prevents me from ensuring the normal display of loading on the client side. Is it a misuse of my approach? Or is it necessary to sacrifice SSR if using lazy fetch? I hope my description of the issue is clear enough. Please let me know if further clarification is needed. Thanks!

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

How can I correctly display a loading screen without blocking the route in Nuxt3?