Next.js 9.3+ Data Fetching Explained: getServerSideProps(), getStaticProps(), and getStaticPaths()

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

КОМЕНТАРІ • 127

  • @lalitvavdara5841
    @lalitvavdara5841 3 роки тому +1

    probably the best explaination for data fetching capabilities of Nextjs...great work

  • @Karlponken
    @Karlponken 4 роки тому +24

    Great explanation! Had a hard time understanding the difference of these 3 from reading the docs, this helped alot! Thanks!

  • @anonysmooth648
    @anonysmooth648 3 роки тому +1

    best explanation with real example, this is what I need in every tutorial

  • @kulrajchavda9538
    @kulrajchavda9538 3 роки тому +1

    Best explanation available on the internet!!

  • @aidanwalker3058
    @aidanwalker3058 3 роки тому +1

    I struggled to understand between getStaticProps and getServerSideProps, watched a few videos but still didn't get it until yours. Greatly explained thanks 🙂

    • @ado
      @ado  3 роки тому

      Great to hear!

  • @mr.rajeshmekala
    @mr.rajeshmekala 3 роки тому

    You nailed it Ado. Clear explanation with examples. Please Keep making videos.

    • @ado
      @ado  3 роки тому

      Thank you :)

  • @shailander13
    @shailander13 3 роки тому +2

    I was running on local environment where site builds on every refresh so got really confused between the getStaticProps and getServerSideProps. Now it’s clear thanks to this video. Also the explanation of getStaticPaths was very good with easy to understand examples. Great work👏🏻👏🏻

  • @maskman4821
    @maskman4821 3 роки тому +2

    Thank you for the great explanations/demonstration/illustrations of data fetching, I am very glad to understand the differences between getServideSideProps and getStaticProps, the mongodb example is awesome for us to understand the differences between these two functions. Thank you so much !!!

  • @computecastle6099
    @computecastle6099 3 роки тому

    Man, you are awesome. Was trying to understand these three data fetching methods for so long. Thanks!

  • @piyshkmr
    @piyshkmr 2 роки тому

    Great Explanation. I really wanted a detailed video like this

  • @rudeadyet1992
    @rudeadyet1992 4 роки тому +3

    This really cleared out some of the confusions. Thanks for the explanation. Appreciate it.

  • @farstep4011
    @farstep4011 3 роки тому

    This video is short and complete.
    Thanks for sharing!!

  • @joebao2536
    @joebao2536 2 роки тому

    very straight and practical explanation ! Awesome

  • @MeganGrantCurlyGirl
    @MeganGrantCurlyGirl 4 роки тому +7

    Love it. Keep up the good work!

  • @justinlu5730
    @justinlu5730 3 роки тому

    the best explanation in all youtube, thanks ado, it helped me a lot !

  • @fyardlest1
    @fyardlest1 3 роки тому +5

    Really helpful thank you! By the way, next time set the sound properly cause I have to push the volume up to hear, lol. We need more next js tuts like this one.

  • @sabeekaqureshi4259
    @sabeekaqureshi4259 3 роки тому +1

    The best explanation I have seen on this, thanks!

  • @emilioortega9487
    @emilioortega9487 2 роки тому

    your explanation was amazing ! please keep posting these videos :) great work

  • @evanlittle114
    @evanlittle114 3 роки тому +1

    Thank you, your explanation and demo was awesome and fully clarified how these concepts work

  • @iShubhamPanchal
    @iShubhamPanchal 3 роки тому

    Straightforward, Hands-on, Great explanation. Thanks buddy and keep going and I just subscribed .

  • @jacobcambell
    @jacobcambell 3 роки тому

    Very well explained cleared my confusion thanks man 👍

  • @joelmuluh1
    @joelmuluh1 2 роки тому

    Very excellent explanation!

  • @saalimkhan4133
    @saalimkhan4133 3 роки тому

    Beautifully explained

  • @GamerSolitO
    @GamerSolitO 3 роки тому +1

    very usefull tutorial! This helped me more than the explanation of my college professor. Thanks man, you should upload more videos like this! New subscriber. you got some potential

  • @devinflora
    @devinflora 2 роки тому

    Wonderful explanation! Thank you so much for making this video!

  • @anthonysim563
    @anthonysim563 2 роки тому

    Thank you, this was an excellent explanation!

  • @yasamansifarianasl7030
    @yasamansifarianasl7030 4 роки тому +1

    Thank you very much, it's really helpful for me! Please create more next.js videos

    • @ado
      @ado  4 роки тому

      More to come! Anything specific you'd like to see?

  • @wfth1696
    @wfth1696 3 роки тому +1

    Great explanation. It really helped me grasp it properly. Thank you!

  • @cutipets8706
    @cutipets8706 2 роки тому

    Great video, great explanation Thank you so much

  • @rojitblaze13
    @rojitblaze13 4 роки тому +11

    Was really confused about getStaticProps and getServerSideProps as it was doing the same thing. This really helped. Is it mentioned some where in the docs?

  • @mohitsojitra3965
    @mohitsojitra3965 4 роки тому

    Very well explained all the concepts.

  • @ankitdalasaniya2463
    @ankitdalasaniya2463 3 роки тому

    You save my day... thanks brother...👍👍

  • @blakefre
    @blakefre 4 роки тому +2

    Great great explanations. Thank you so much for this, very grateful

    • @ado
      @ado  4 роки тому

      Glad it was helpful!

  • @PawanKumar-tu6ti
    @PawanKumar-tu6ti 2 роки тому

    Thank you for so useful video, really appreciate that.

  • @MahmoudALSrouji
    @MahmoudALSrouji 4 роки тому +3

    Greatly explained. Thank you!

  • @nahida4444
    @nahida4444 3 роки тому +1

    one question about the getStaticProps and unstable_revalidate. You mentioned that it gonna update every second or every 10 mins (depending on what you set). Does that mean it can work as setInterval? I am trying to do make a cryptocurrency ticker, where I want the currencies will update every 5 seconds, so I am making api calls every 5 seconds using useEffect and setInterval. I wonder if I can make the function using getStaticProps

  • @skverskk
    @skverskk 3 роки тому

    Well done and very informative

  • @lefterisk1872
    @lefterisk1872 2 роки тому

    Man....your are awesome....for real....!!

  • @ThePeerroo
    @ThePeerroo 3 роки тому

    Hvala Ado olaksao si mi zivot :D

  • @cutipets8706
    @cutipets8706 2 роки тому

    I have a question what if we set the callback to true and we typed in an id in the URL that doesn't exist in the database how can we handle this situation?

  • @tech3425
    @tech3425 2 роки тому

    Great Explanation

  • @abasthurabli7630
    @abasthurabli7630 4 роки тому +1

    Thanks for the video. I learned a lot of things. 👍

  • @isaacemmanuel
    @isaacemmanuel 3 роки тому

    Very well explained, Thanks Ado

  • @carlosbenavides670
    @carlosbenavides670 3 роки тому

    Thanks for the video.
    Pretty useful.

  • @garrysandhu4197
    @garrysandhu4197 3 роки тому

    Awesomeeeee Explanation.

  • @hiteshagja24
    @hiteshagja24 4 роки тому +1

    Very well explained.

    • @ado
      @ado  4 роки тому +1

      Glad you liked it

  • @anphearab8250
    @anphearab8250 4 роки тому +1

    Great video ! Keep it up !

    • @ado
      @ado  4 роки тому

      Thanks!

  • @PuntielRealty
    @PuntielRealty 2 роки тому

    Thanks bro very clear and understandable. How about handling form submit and storing the data?

  • @ganapathipranesh8506
    @ganapathipranesh8506 4 роки тому +1

    Much neat and precise! thanks 🙏🏼

  • @darksurvey2347
    @darksurvey2347 2 роки тому

    really helpful.😊😊😊

  • @ОлегПузанкін
    @ОлегПузанкін 4 роки тому +1

    Thank you for such great explanation

    • @ado
      @ado  4 роки тому

      Glad it was helpful!

  • @zanbri
    @zanbri 3 роки тому +13

    One suggestion: the audio was quite low -- it would be helpful to normalize it to a higher volume. Otherwise, a great video - thanks!

  • @kirillpavlovskii8342
    @kirillpavlovskii8342 3 роки тому

    does node js express server runs under the hood to constantly fetch data and serve it in getservsideprops method?

  • @markusbuchanan6130
    @markusbuchanan6130 2 роки тому

    Great Video! Just had a question :
    Is there any benefit to making fallback false? It looks like its just going to error out any new pages for new data that will be added in the future based on the video to me.

  • @FranciscoHernandez-vh6bv
    @FranciscoHernandez-vh6bv 2 роки тому

    Honestly great video

  • @Rusakin
    @Rusakin 3 роки тому

    how to revalidate in getserversideprops?

  • @leanprogrammer
    @leanprogrammer 3 роки тому

    Great stuff! More nextjs videos 👍

  • @neerajsinghtangariya2587
    @neerajsinghtangariya2587 3 роки тому +1

    I think in new version nextjs provided revalidate instead of unstable_revalidate. Right ?

  • @josephuzuegbu7431
    @josephuzuegbu7431 2 роки тому

    I love this video. Thanks

  • @EVA_Hamza
    @EVA_Hamza 3 роки тому

    Awesome explanation, thank you

  • @javascriptprisoner900
    @javascriptprisoner900 4 роки тому

    Wow! This video was really helpful for me. Thank you!

  • @snpr9603
    @snpr9603 3 роки тому

    Thanks! Very good explanation!

  • @muhammadalbab2678
    @muhammadalbab2678 3 роки тому

    i'm a bit confused, then what is the difference between using only the useEffect hooks to fetch data and the getServerSideProps() ? can someone pls explain

  • @rafahdez2772
    @rafahdez2772 3 роки тому

    is there any way the I can pass information from getStaticProps to getStaticPaths so the app doesn't have to do 2 request getting the same information??

  • @stevejohann5101
    @stevejohann5101 3 роки тому

    Nicely done - thank you for your time!

    • @ado
      @ado  3 роки тому

      My pleasure!

  • @djelasrca8091
    @djelasrca8091 2 роки тому

    can you put link to the github repository? I would like to take a look on your function for data fetching

  • @sabassegovia3915
    @sabassegovia3915 2 роки тому

    Awesome video!

  • @pavlo-vasylkivskyi
    @pavlo-vasylkivskyi 3 роки тому

    Thanks! Wery clean explanation 🤗

  • @mirzadvarupa5652
    @mirzadvarupa5652 3 роки тому

    Hvala ti Ado! :)

  • @codingwithlucy
    @codingwithlucy 2 роки тому

    Really nicely broken down, thank you so much :)

  • @FitnessChaos
    @FitnessChaos 3 роки тому

    Why do you compress lines of code? How can a viewer understand the context of the code if you got lines compressed / hiding.

  • @hiberniankingy
    @hiberniankingy 3 роки тому

    so correct me if I'm wrong here but do these fetch methods mean you don't have to rely on useEffect?

  • @davidsonzed
    @davidsonzed 3 роки тому

    This is really awesome, can you also make a video about hooks

  • @babaganaabba785
    @babaganaabba785 3 роки тому

    Thanks so much. This was really helpful

  • @nikosspiropoulos8417
    @nikosspiropoulos8417 3 роки тому

    very good explanation thank you!!

  • @user-ce4ct8ws8r
    @user-ce4ct8ws8r 2 роки тому

    Hii there, I have a question .. What if the data fetching takes time ? would gSSP hold the page rendering or will empty page will appear?

  • @romimaximus
    @romimaximus 3 роки тому

    Ok, so if i use the "getStaticProps " and "getStaticPaths", and build the app, and deploy it, ... and every time , something changes in the database, i gonna have to rebuild the app and deploy again ?...this kind of confusing.. 🤔

  • @abdulmoeez13
    @abdulmoeez13 3 роки тому

    Keep It Up ❤️

  • @dawid_dahl
    @dawid_dahl 3 роки тому

    Great video. Subscribed!

  • @DanZ-fq2qs
    @DanZ-fq2qs 3 роки тому

    Great explanation mate, is the demo project open source ?

  • @mroobert
    @mroobert 4 роки тому +1

    Great content! Liked & Subscribed

    • @ado
      @ado  3 роки тому

      Awesome, thank you! Much appreciated!

  • @igotbit9454
    @igotbit9454 2 роки тому

    Very useful. Subbed

  • @dushyantkumar4428
    @dushyantkumar4428 4 роки тому +1

    Nice Video. Can you add more info on incremental static regeneration?

    • @ado
      @ado  4 роки тому

      Hey Dushyant, yes I will create a video on it next week!

    • @ado
      @ado  4 роки тому

      Made it: ua-cam.com/video/IJkTpR7sSwI/v-deo.html :)

  • @berlino5563
    @berlino5563 4 роки тому +1

    Hi Ado, cool your channel :) i have a question: i'm working a fullstack app with Next js and a headless cms as backend restfull api. I need to handle logout user with jwt in cookie httponly (server side - not access in client side). what approach do you recommend about to implement logout user? what is the simplest and fast solution?

    • @ado
      @ado  4 роки тому +2

      Hi Berlino, that's a great question. For all things authentication and authorization I usually prefer to defer things to Auth0. They have a really good Next.js library (github.com/auth0/nextjs-auth0). But if you're rolling your own solution, I would just create an API route in Next.js to handle that logout call. In Next.js API routes you have full access to the request object so can destroy the cookie there thereby logging the user out. Let me know if this helps!

  • @mohammedhijas106
    @mohammedhijas106 3 роки тому

    Nice one !

  • @adimardev1587
    @adimardev1587 3 роки тому

    thank you it helps a lot!

  • @ivaylopetrov9956
    @ivaylopetrov9956 3 роки тому

    Good job man

  • @DanFlakes
    @DanFlakes 3 роки тому

    Great tutorial!

  • @online-notary-us
    @online-notary-us 2 роки тому

    Where is the code to help us follow along?

  • @pannihto7588
    @pannihto7588 4 роки тому +2

    Quality content. Just gotta work on editing a little bit :)

    • @ado
      @ado  4 роки тому +1

      Thanks! yeah it's a work in progress :)

  • @hoodieson2008
    @hoodieson2008 3 роки тому

    Nice! Actually took something away from the video!!

  • @moosegoose1282
    @moosegoose1282 3 роки тому

    uhh how is data being passed from props to ur component? u didn't show that at all

  • @testrandom1852
    @testrandom1852 2 роки тому

    Thank You!

  • @igorr4682
    @igorr4682 3 роки тому

    Nice gb music 🎺

  • @malikbrahimi7504
    @malikbrahimi7504 4 роки тому

    Can you do a tutorial on handling concurrent clients? For example if I'm on a page /item/:id where id=1 and another user deletes that resource from the DB, what should happen to me as a user while I'm on that stale page? What if two users are mutating an object at the same time?

    • @ado
      @ado  4 роки тому +2

      Hey Malik - that’s not a bad idea. I’ll create a video on it next week. :D

    • @gjahnavi1688
      @gjahnavi1688 3 роки тому

      @@ado hey,can you explain me
      How to import that "fetchGraphQLQuery" in nextjs

  • @Psychobellic
    @Psychobellic 3 роки тому

    I'm going crazy with this lol... NextJS was so easy until now xD
    how can I get a query from the user and then run this query fetch in server-side?
    My API key cannot be exposed =(

  • @drworm1110100
    @drworm1110100 3 роки тому

    Thanks!!!

  • @alooooooola
    @alooooooola 4 роки тому

    so if facebook has 1 billion post so their backend has to query for 1 billion post id then frontend has to call an api to get that 1 billion paths. It sounds wrong for me

    • @ado
      @ado  4 роки тому

      If they wanted to pre-render all of that content, then yes, but they're unlikely to want to pre-render all of it ahead of time. With Incremental SSR though, those pages can be generated when they are requested and still served statically.

  • @aseeldweedar180
    @aseeldweedar180 2 роки тому

    thank you

  • @mitchellbenjamin3071
    @mitchellbenjamin3071 2 роки тому

    thank u