A Better Approach To Data Fetching In Nuxt?

[@jatinkumar7287]

Working on nuxt and having to found u is a blessing. I don't know why there are so little vuejs or nuxtjs tutorial on youtube.

[@devflo]

I actually create nuxtjs tutorial on my channel would add more soon

[@alimaher1]

Great video, John and I totally agree with you. Blocking the page untill the data is fetched does not make a great UX. Also, it's important to note that this behavior relies on async setup, top level await and suspense component. As there could be some caveats that require knowledge of these to deal with them.

[@JohnKomarnicki]

Thanks, yeah i agree! I assume that if you're watching this video you'd have some familiarity with these concepts. But if not, i feel Nuxt is pretty intuitive to allow you to have little knowledge and still understand. I also have videos on most of these concepts as well :)

[@alimaher1]

@@JohnKomarnicki Yeah totally agree. And I've been here for a while and I could assume I watched most of your videos. Love your content, man. Btw I have some concern regarding using useFetch for client side api data fetching. I know it's recommended, acc to docs, to use $fetch instead but what if I wanted to get the benefits of using useFetch. Nuxt do warn "Component is already mounted, use $fetch instead.". What do you think regarding that? I pass that 'server: false' to useFetch but still the warning persists.

[@berkaykarademir8641]

you are the best easily. thanks for sharing better approaches instead of just talking about how to do things in the most primitive way

[@JohnKomarnicki]

I appreciate that!

[@franepoljak9605]

One important note, you need to think about server side rendering and SEO, and use lazy loading only for staff that are not important for SEO, and/or might take a while to load. You don't want your first render to take long, and you want the user to have some content while other content is loading, preferably more important contet first. Sometimes it's all about finding the right balance.

[@ibrahimabdullahi6898]

Thank you John, I've been trying to find how to just navigate, and I have to resort to using a normal function, but now I now I can use the lazy approach

[@youhan96]

Great tip. I guess pending is going to be replaced by status==='pending' in v4

[@freakfreak786]

So many useful infos. Thanks man, thats awesome

[@MongMolika]

Hello john, could you explain tutorial with the search to search item from clients side in the product of the server side with all methods of Nuxt please ?

[@madukomablessed4712]

awesome video. Would love to use Nuxt and Go on a project. Also, is it possible to make a full stack Nuxt app (using server pages and the likes)

[@devflo]

it is possible to have server routes and actions it is a complete full stack framework

[@madukomablessed4712]

@@devflo Yeah I know, I mean he should make a video on those, as a project

[@devflo]

@@madukomablessed4712 okay, he has a few projects but not sure he has one where he used the full nuxt

[@AntonioCabralNumberOne]

I have one question as a SSR newbie: Using a loading state is good for UX , but isn't it defeating the purpose of improving page SEO, which is supposed to be the reason of existing of SSR?

[@JohnKomarnicki]

@@AntonioCabralNumberOne With this approach the loading state won’t occur on the first page load, only on client side navigation once the application is rendered

[@YessenOrazbaiuly]

Very useful info. Thank You!

[@teckyify]

The question is, what it the whole point of Nuxt if you don't render your page server side? Otherwise I can use Vue in the latest version which has a much better overall development experience and capabilities.

[@zooldeveloper]

It's great video thank you

[@RomFeliciano]

Hello sir can you make a video about nuxt apollo? I am trying to initially fetch my data using useAsyncQuery but when I reload the page the data are gone but when using going back to that page displayed my data

[@dave_an]

Thanks man

[@LaurieCocoso]

I was wondering, when using useFetch it is universale rendering, when is it doing ssr and when is it doing csr? Because if you have a loading screen it is basically doing csr which is not great for seo right?

[@JohnKomarnicki]

As you mentioned, Nuxt has universal rendering. The initial page load will happen on the server and then after that it’s client side. This approach just helps provide a better user experience after the app has been loaded initially. UseFetch handles fetching the data on the server and then it passes that data to the client without refetching when the app hydrates.

[@LaurieCocoso]

@@JohnKomarnicki Thanks!

[@mathiasokafor7318]

great video

[@matanon8454]

💚

[@виртуоз_ру]

👍👍👍👍👍👍👍👍

[@yoanestradablanco1608]

Good VIdeo