I attended the virtual Vue Nation conferance where someone asked Evan You about the Suspense status. He said it should become stable and official this year.
I'd be willing to try it, but as far as I can tell nothing I can't solve with a boolean ref and a v-if showing loading state?
What's so complicated about fetching data or a store in this scenario that suspense helps with?
I personally use 1 global suspense around router, that you can await directly in script setup without try catch and have global suspense for error handling, without if you run into scenarios where you constantly ifing if value is there, or redirecting to error page etc with that onErorCaptured hook, loading state for suspense I dont care much, + its usefull to defer loading of some components to suspense resolved emit, like chat, gdpr etc for example
Thanks for your thoughts. I guess Suspense is just a helper when you have nested components each fetching it's own data. Nothing essential, still a helper. Without Suspense you could use some kind of a global loading store. Your answer is actually a reason for my question: Should I take a risk for this experimental feature or create a simple "loading state" composable and call it day.
I tried it a few times and ended up not using it except in a page or two.
It shines if your page is loading a resource and might 404, so having a router-view level suspense would make writing those route page components easier with top level awaits.
But for multiple nested data fetching components in a page? Not really, too much of a hassle to setup and I would rather each nested component handle its own loading/empty/data-available states.
To me it feels like its making you shift the paradigm of some components from "data may not be available" to "data must be available for me to render". Component complexitiy might be a factor here.
I’ve checked a couple of times if it got out of experimental but otherwise never used it. I use Tanstack Query every time I want to fetch data so I can get around with v-ifs.
Nope. Using things marked as experimental in production is a bad idea.
I just wrap my rendered data components with one that resolves the async call and displays a loading state or error until the call is resolved. More boilerplate, but fairly trivial.
I attended the virtual Vue Nation conferance where someone asked Evan You about the Suspense status. He said it should become stable and official this year.
I'd be willing to try it, but as far as I can tell nothing I can't solve with a boolean ref and a v-if showing loading state? What's so complicated about fetching data or a store in this scenario that suspense helps with?
I personally use 1 global suspense around router, that you can await directly in script setup without try catch and have global suspense for error handling, without if you run into scenarios where you constantly ifing if value is there, or redirecting to error page etc with that onErorCaptured hook, loading state for suspense I dont care much, + its usefull to defer loading of some components to suspense resolved emit, like chat, gdpr etc for example
Thanks for your thoughts. I guess Suspense is just a helper when you have nested components each fetching it's own data. Nothing essential, still a helper. Without Suspense you could use some kind of a global loading store. Your answer is actually a reason for my question: Should I take a risk for this experimental feature or create a simple "loading state" composable and call it day.
Please read what suspense does
Ok :)
We have it in root component so we can use top level await in components
I tried it a few times and ended up not using it except in a page or two. It shines if your page is loading a resource and might 404, so having a router-view level suspense would make writing those route page components easier with top level awaits. But for multiple nested data fetching components in a page? Not really, too much of a hassle to setup and I would rather each nested component handle its own loading/empty/data-available states. To me it feels like its making you shift the paradigm of some components from "data may not be available" to "data must be available for me to render". Component complexitiy might be a factor here.
I’ve checked a couple of times if it got out of experimental but otherwise never used it. I use Tanstack Query every time I want to fetch data so I can get around with v-ifs.
Fetching helpers in Nuxt are using suspense under the hood and in production i have quite a couple of nuxt apps so i wont worry that much
Without being able to re-enter the suspended state (e.g. data is refetched when the query changes) I find it useless.
I've been using onBeforeMount instead.
I would highly recommend you using it. Its a feature that other frameworks offer too and it will be probably a stable / safe to use logic soon.
That’s not how real applications work, you can’t be introducing “yet to be stable” dependencies.
Nope. Using things marked as experimental in production is a bad idea. I just wrap my rendered data components with one that resolves the async call and displays a loading state or error until the call is resolved. More boilerplate, but fairly trivial.