Data Fetching Skill issues ? π€
Hi everyone π
So I am working on my project with Nuxt and I am experience some issues, which for the world I can not resolve.
So I have this
pages/[page].vue page where I am using data loader (but useAsyncData and useFetch yield the same result) and the goal is simple, user navigate to this page, we load the data from database and display them.
The loader works, we get our data. π
However. The initial request, so when I open the http://localhost:3000/[page] is blocked. Or rather the navigation to the page is blocked, until the Promise is resolved. And the pending <PageSkeleton /> is not shown.
Now I have tried the same set-up in Next.js where the initial request is blocked as well, however you can use loading.tsx component to display loading state, or in layout.tsx wrap the page component in <Suspense /> and display fallback loading skeleton.
So naturally, I did exactly that, I wrapped the <div><slot /></div> in <Suspense /> and nothing happened.
I moved the whole data loading and displaying to separate component and wrapped that one in <Suspense /> on the pages/[page].vue page.
I have tried useLazyFetch, useLazyAsyncData and everything yields the same result, the inital request is always blocked/ no loading skeleton displayed.
I guess these are just skill issues, but could someone help me with this one?
Code snippets could be found https://github.com/nuxt/nuxt/discussions/27872
Thank youNuxt Image
Server Loaders - Form Actions
Use server loaders to load data in your pages and components.
GitHub
Data Fetching Skill issues ? π€ Β· nuxt nuxt Β· Discussion #27872
Hi everyone π So I am working on my project with Nuxt and I am experience some issues, which for the world I can not resolve. So I have this pages/[page].vue page where I am using data loader (but ...
5 Replies
what happens if you log the pending/loading state?
watchEffect(() => console.log(pending.value))
maybe the request is being completed before the page is mounted so youre never seeing the loading state? not sure
Hi Dwol π
Yeah so, I have added the good old
await new Promise((r) => setTimeout(r, 5000))
And I am waiting for the initial response until this promise is resolve.
On subsequest client navigaiton, the loading skeleton is displayed, however the initial request (or page refreshed) is blocked for at least 5 secondsThat should be correct behavior as Nuxt does not support streaming responses
So you have to await until SSR is fully done to display the fully rendered page
Hi Alex π
Thank you for explanation π - love your videos btw.
So, is there a way to stream response in Nuxt / is it on Roadmap?
And the workaround could be to fetch data on client only right
thanks π
This is definitely something we want to look into but no ETA
Yes, though SEO might suffer under that