A Better Approach To Data Fetching In Nuxt?

Поділитися
Вставка
  • Опубліковано 20 січ 2025

КОМЕНТАРІ • 31

  • @jatinkumar7287
    @jatinkumar7287 8 місяців тому +17

    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
      @devflo 8 місяців тому

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

  • @alimaher1
    @alimaher1 8 місяців тому +5

    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
      @JohnKomarnicki  8 місяців тому

      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
      @alimaher1 8 місяців тому

      @@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
    @berkaykarademir8641 7 місяців тому +1

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

  • @ibrahimabdullahi6898
    @ibrahimabdullahi6898 4 місяці тому

    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

  • @freakfreak786
    @freakfreak786 5 місяців тому +1

    So many useful infos. Thanks man, thats awesome

  • @franepoljak9605
    @franepoljak9605 4 місяці тому

    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.

  • @youhan96
    @youhan96 7 місяців тому +3

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

  • @MongMolika
    @MongMolika 3 місяці тому

    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 ?

  • @RomFeliciano
    @RomFeliciano 7 місяців тому

    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

  • @AntonioCabralNumberOne
    @AntonioCabralNumberOne 3 місяці тому

    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
      @JohnKomarnicki  3 місяці тому

      @@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

  • @madukomablessed4712
    @madukomablessed4712 8 місяців тому +2

    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
      @devflo 8 місяців тому

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

    • @madukomablessed4712
      @madukomablessed4712 8 місяців тому +1

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

    • @devflo
      @devflo 8 місяців тому

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

  • @YessenOrazbaiuly
    @YessenOrazbaiuly 8 місяців тому

    Very useful info. Thank You!

  • @LaurieCocoso
    @LaurieCocoso 7 місяців тому

    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
      @JohnKomarnicki  7 місяців тому

      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
      @LaurieCocoso 7 місяців тому

      @@JohnKomarnicki Thanks!

  • @zooldeveloper
    @zooldeveloper 8 місяців тому +1

    It's great video thank you

  • @dave_an
    @dave_an 7 місяців тому

    Thanks man

  • @виртуоз_ру
    @виртуоз_ру 8 місяців тому

    👍👍👍👍👍👍👍👍

  • @mathiasokafor7318
    @mathiasokafor7318 8 місяців тому

    great video

  • @matanon8454
    @matanon8454 8 місяців тому

    💚

  • @yoanestradablanco1608
    @yoanestradablanco1608 8 місяців тому

    Good VIdeo

  • @teckyify
    @teckyify 3 місяці тому

    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.