PeterK
PeterK
PostsComments
NNuxt
Created by PeterK on 6/27/2024 in #❓・help
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 you
11 replies