Next.js Visually Explained: Partial Pre-rendering (PPR)

Поділитися
Вставка
  • Опубліковано 26 сер 2024

КОМЕНТАРІ • 255

  • @real-oppenheimer
    @real-oppenheimer 7 місяців тому +166

    The way these concepts are explained (like the content and the wording) together with the matching visualizations makes this one of the best "dev tutorials" I have ever seen. Great job!

    • @ridass.7137
      @ridass.7137 6 місяців тому +1

      billions spent right

    • @Delba
      @Delba  6 місяців тому +12

      Thank you for saying that, I appreciate it 🙏

  • @JohnBuildWebsites
    @JohnBuildWebsites 6 місяців тому +32

    The industry needs more creators like you. Such an amazingly clear explanation of these concepts.

    • @Delba
      @Delba  6 місяців тому +2

      Appreciate you so 🙏

  • @christophercaldwell6641
    @christophercaldwell6641 6 місяців тому +24

    Next and Vercel should include this in their documentation. Incredibly helpful video, thank you!

  • @Yadiel458x
    @Yadiel458x 7 місяців тому +23

    This is soooo good I feel like these videos should be included somewhere in the Next.js docs.

  • @liendwin
    @liendwin 6 місяців тому +12

    I like how Next is also focusing on explaining their concepts themselves instead of throwing a bunch of features with a mediocre documentation, that's a good explanation, keep it up.

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

      cof cof trpc cof cof

  • @Foused87
    @Foused87 6 місяців тому +6

    The best explanation video I've ever watched in my entire life.

    • @Delba
      @Delba  6 місяців тому

      lol, appreciate you saying so 🙏

  • @ammarhalees6370
    @ammarhalees6370 Місяць тому +1

    6 years in front-end, and I've never seen such a clear and detail explanatory vid! truly amazing work!

  • @govindpvenu
    @govindpvenu 15 годин тому

    This should be on Next.js home page. The visual quality is dope.
    Edit:Turns out they aleady have this in the docs :)

  • @saisreenivassonthena9901
    @saisreenivassonthena9901 Місяць тому

    I was making sure that, this wasn't an official @nextjs video! Its that smooth! Kudos to everyone behind it, or if its just you, you are GOD level in explaining concepts like this

  • @anil97
    @anil97 6 місяців тому +5

    This is one of the best presentation I've ever seen. Not gonna lie.

  • @SamSedighian
    @SamSedighian Місяць тому

    This has to be the best video explanation on the topic 👏🏼

  • @smithrockford-dv1nb
    @smithrockford-dv1nb 2 місяці тому

    Wait, this is not a video from Vercel themselves? Wow, your speaking, animation, and video editing skills are top notch!

  • @nicholasprice5137
    @nicholasprice5137 3 місяці тому +1

    WOW. This is legit one of the best produced/explained/illustrated technical explanation videos I’ve ever seen. Wildly good.

    • @Delba
      @Delba  3 місяці тому +1

      Thank you, I appreciate it!

  • @pplytas
    @pplytas 6 місяців тому +3

    This is the best explanation of the concept so far! The visuals and pace of the video are sooo on point. Thank you Delba.

    • @Delba
      @Delba  6 місяців тому

      Thank you, I appreciate it.

  • @tauhid97k
    @tauhid97k 6 місяців тому +1

    This is such an an amazing explanation and visualization. Production quality is out of this world. You'll get more subscribers pretty quickly.

  • @stockmarketwizard9781
    @stockmarketwizard9781 5 місяців тому

    The pace of explanation, along with the visual matching what is being said and the quality of the explanation is top class. Very surprised to see subscribers under a million here. This channel will grow very fast if videos are created like this consistently

  • @moyezrabbani637
    @moyezrabbani637 6 місяців тому +2

    The amount of work put into producing this content and making these topics understandable is just commendable.
    Thanks Delba. You earned a sub.

    • @Delba
      @Delba  6 місяців тому

      Thank you! Welcome.

  • @tradfluteman
    @tradfluteman 6 місяців тому +1

    This is the best explanation I have seen of these rendering models, by a lot, but I still think two misconceptions are possible, especially for people with self-hosted apps:
    1. You do *not* need the Edge or Vercel, or even a CDN, to take advantage of PPR. The Next Route Cache will serve your static assets.
    2. PPR is only about speed, not about cost. Users will see the cached static parts of your app first, but those parts will still eventually re-render on every request, so that the dynamic parts re-render also.
    Next cannot break your app apart, unless (maybe) you're using parallel routes, so it needs to run the whole "rendering engine" of your page just to get the dynamic outputs, with all the cost incurred.
    This means there are still big advantages to using pages that "partially render" with fully static content on the server and then complete the rendering, with personalized data fetching, on the client.
    Next even confusingly tries to force you to do data fetching with request-based data on the client, in layout components, for this exact reason. Otherwise all your pages would become dynamic, even if served with PPR.

    • @Delba
      @Delba  6 місяців тому

      Thank you!
      In general, this video is about the vision of Partial Prerendering that we're building towards, not about its behavior during alpha.

  • @XrVwxLF91Q
    @XrVwxLF91Q 7 місяців тому +5

    Next-level clarity. Really enjoyed this video!

  • @vandhuymartins9481
    @vandhuymartins9481 6 місяців тому +1

    wow... the content, sound, animations, everything on this video is out of this world! Congratz Delba

    • @Delba
      @Delba  6 місяців тому

      Thank you!

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

    These videos just sit well in my brain! Thank you!

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

      Glad to hear it!

  • @MikeMansourTech
    @MikeMansourTech 6 місяців тому

    This is the most amazing work I've ever seen in explaining concepts. This is literally raising the bars to the next level.

  • @deku_nattsu
    @deku_nattsu 6 місяців тому +1

    I don't even use react or nextjs, i stayed for the great content quality, well done! I will definitely come back to this again once i start experimenting with the react ecosystem

    • @Delba
      @Delba  6 місяців тому

      Thank you! We'll be here :D

  • @greob
    @greob 6 місяців тому +25

    The production value is so high, I don’t think this video could be any more perfect! Very nice work, superb presentation, very easy to understand! Thanks for sharing!

    • @Delba
      @Delba  6 місяців тому +2

      Appreciate the kind words 🙏

  • @bibartaks
    @bibartaks 7 місяців тому +6

    Absolutely awesome! Please continue making more videos like this. Love it! 💗

  • @tomspatula616
    @tomspatula616 5 місяців тому

    Two minutes into the video, and I have immediately clicked the "like" and "subscribe" buttons! Please make more videos on Next.js!

    • @Delba
      @Delba  5 місяців тому

      Glad to hear it, welcome!

  • @MuhammadHaseebAhmed
    @MuhammadHaseebAhmed 6 місяців тому +1

    ngl even Lee Robinson was not able to deliver concepts of PPR as you did . amazing !

    • @Delba
      @Delba  6 місяців тому +1

      We work together :P He gave feedback that made this better.

  • @filipniklas
    @filipniklas 6 місяців тому +1

    This is a very well crafted presentation that adequately explains the concepts. On point, well paced and the visuals are sleek! Please do one for next.js caching next!

  • @Nightizm
    @Nightizm 6 місяців тому +2

    Fantastic, thank you. Please more of these with the awesome visualizations+animations!

    • @Delba
      @Delba  6 місяців тому

      Thanks, I use Remotion.

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

    Never have I understood the concepts such beautifully. Found another great mentor. No Cap.

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

      🤛

  • @trueberryless
    @trueberryless 6 місяців тому +1

    This video quality is truly remarkable! ❤

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

    Holy God what did I just watch, this is amazing

  • @gauravr4127
    @gauravr4127 6 місяців тому

    Wow! Such a brilliant way to illustrate complex ideas and explain. Music + Illustration + Narration is perfect. I wish to see more from you and I'd love this to be on @nextjs official documents

    • @Delba
      @Delba  6 місяців тому

      Thank you! Working on it.

  • @hifzazafar9307
    @hifzazafar9307 5 місяців тому

    Such an amazingly clear explanation of these concepts. The best explanation video I've ever watched in my entire life. Please continue making more videos like this. Love it! 💗

    • @Delba
      @Delba  5 місяців тому

      Thank you!

  • @rafaelrcamargo
    @rafaelrcamargo 5 місяців тому

    Coming back here for the 20th time, what an amazing explanation!

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

      Haha, thanks!

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

    The visuals are astonishing. Fantastic work, Delba.

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

      Thank you!

  • @ignacior98
    @ignacior98 6 місяців тому

    Incredibly helpful explanation

    • @Delba
      @Delba  6 місяців тому

      Glad to hear it!

  • @DominikSipowicz
    @DominikSipowicz 7 місяців тому +2

    This video explains Partial Prerendering really well. These animations are amazing!

    • @Delba
      @Delba  6 місяців тому

      Appreciate it Dom 🙏

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

    Awesome presentation! Great animations, pace, and music!
    I feel like I just went through the whole evolution of web development from a tech-museum! It's THAT good!

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

    This was so cool! Fantastic visualization and telling of web history! That's a sub for sure!

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

      Thanks, welcome!

  • @CharlieKiloSierra8893
    @CharlieKiloSierra8893 6 місяців тому

    Great explanation together with the visual on what is actually happening and forgot about the actual coding but the concept of how it works you really explain it well. Thank you

    • @Delba
      @Delba  6 місяців тому

      Thank you!

  • @hankersoree
    @hankersoree 5 місяців тому

    please upload more content. i love the way you explain ❤

  • @amanmavai99
    @amanmavai99 5 місяців тому

    wonderful way to explain complex concepts in easy to understand manner. easily one of the best tech videos I have every seen. thanks a lot for this amazing content.

  • @ZainRamzan-pt8cm
    @ZainRamzan-pt8cm 6 місяців тому

    i have been working on multiple Next js project for last 2 years and i can say that this is one of the best thing next js team had ever done.
    Can u please make a video to do all of this pratically in code

  • @essawy897
    @essawy897 6 місяців тому

    5 seconds in and I'm already subscribed!
    Please do a video or write a post on how you create these animations with remotion!

    • @Delba
      @Delba  6 місяців тому

      Welcome!
      Perhaps in the future, working on next.js / react videos for a bit.

  • @codeChuck
    @codeChuck 6 місяців тому

    It is funny how Theo explains the same concepts, but without animations! With visuals it is even better! Cool stuff! Keep up the quality! Thanks for video!

    • @Delba
      @Delba  6 місяців тому +2

      We tackle the same problems from different angles.

  • @drujas
    @drujas 6 місяців тому

    Seria genial ver otros topicos de react y next explicados de esta forma. Una joya. Buen trabajo.

  • @ronrupp_
    @ronrupp_ 17 днів тому

    love those visuals!

  • @NarcisMM
    @NarcisMM 6 місяців тому

    This was a great presentation

  • @haithamaleryani8279
    @haithamaleryani8279 6 місяців тому

    The BEST Tutorial I ever seen .

  • @taffoo
    @taffoo 2 місяці тому

    Delba! Do you want to share how you do videos like this ?!?!? If I ever would make my own youtube videos they should either be of this quality or I better NOT DARE ever publish a video. Amazing presentation! Keep the videos coming, I subscribed! 🤩

  • @azizsafudin
    @azizsafudin 6 місяців тому +1

    Brilliant content

  • @SumanthPagidipalli
    @SumanthPagidipalli 6 місяців тому

    Quality of the video is top notch.
    Rowdy salute to @Delba

  • @jimmyj.6792
    @jimmyj.6792 6 місяців тому

    Wonderful video Delba, congrats for that. Explanations are so easy to understand.
    And the animation is totally fluid, wonderful. Absolutely love this content 😍
    Thank you so much 🙏

    • @Delba
      @Delba  6 місяців тому +1

      Thank you! Glad to hear it.

  • @xavimc9794
    @xavimc9794 5 місяців тому

    Very good explained, thanks for the video! New subscriber from spain!

    • @Delba
      @Delba  5 місяців тому

      Thank you. Welcome!

  • @anbarasu1997
    @anbarasu1997 6 місяців тому

    Beautifully explained. Animation is so intuitive. Keep it up!

  • @mdrakibul4052
    @mdrakibul4052 5 місяців тому

    thank you very much for excellent explanation 💗

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

    Amazing explanation, and the graphics and animations are very well made, thanks

  • @markusfeljofsen8345
    @markusfeljofsen8345 6 місяців тому

    Very good explanation

  • @awksomeid6965
    @awksomeid6965 6 місяців тому

    instant like and subs. this is the best concept explaining video i've ever seen in my entire life and i am not event exaggerating it a bit. 10/10 keep up. waiting for the next videos.

    • @Delba
      @Delba  6 місяців тому

      Haha, thank you for the kind words. And welcome!

  • @48595157484812
    @48595157484812 6 місяців тому

    good pace, good visuals, thank you for the video

  • @Johnny-rf4iu
    @Johnny-rf4iu 6 місяців тому

    Wow the explaination and visualization

  • @TheAkiller101
    @TheAkiller101 6 місяців тому

    absolutely love your style of explanation

  • @amirreza3638
    @amirreza3638 6 місяців тому

    Your content is great! Keep it up👌

  • @b3rking
    @b3rking 6 місяців тому

    this what we call understading and knowing a subject! Great no the animation and explanation, soo.. im subscribing

    • @Delba
      @Delba  6 місяців тому

      Thank you. Welcome!

  • @VadimTi320
    @VadimTi320 6 місяців тому

    What’s great about next.js is that you don’t really need to know all of this for it to work, it’s just automatically prerenders what it can

  • @fauzanr..
    @fauzanr.. 6 місяців тому

    the visualization is so good

  • @mcCorn6478
    @mcCorn6478 6 місяців тому

    Wow, you did an amazing job explaining this. Thank you

  • @pablofernandezruiz8024
    @pablofernandezruiz8024 6 місяців тому

    Thank you for doing God's work here! Your concept videos are astonishing, and the level of detail and finesse is immaculate. Please never stop delivering such high-value content! I adore you 😄

  • @bat-erdenekhashbat1205
    @bat-erdenekhashbat1205 6 місяців тому

    content quality is perfect. thanks

  • @KartikKaushik-n7q
    @KartikKaushik-n7q Місяць тому

    best explanation

  • @taiwojolomi
    @taiwojolomi 6 місяців тому

    This is really nice... It was explain really well... Kudos Delba

    • @Delba
      @Delba  6 місяців тому

      Glad to hear it!

  • @Ayoubased
    @Ayoubased 6 місяців тому

    Delba, do you ever find yourself caught between the desire to create more content and the temptation to spend extra time perfecting a single video because you know you're capable of producing something even better, yet still eager to produce more?

    • @Delba
      @Delba  6 місяців тому

      All. The. Time.

  • @sealuke2724
    @sealuke2724 6 місяців тому

    gorgeous content

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

    Keep going with your videos! You have a talent in explaining!

  • @rafishaik503
    @rafishaik503 6 місяців тому

    Wonderful explanation with beautiful slides. ❤

  •  6 місяців тому

    Amazing presentation, and very good featured.

  • @MilindMishra
    @MilindMishra 6 місяців тому

    wow so amazing! kudos to the effort building this!

    • @Delba
      @Delba  6 місяців тому

      Thank you so much!

  • @81NARY
    @81NARY 6 місяців тому +1

    Please do a video or write a post on how you create these animations with remotion!

  • @aaditya_ai
    @aaditya_ai 6 місяців тому

    Keep em coming!
    Loving these type of videos 🎉❤

  • @stefan1397
    @stefan1397 5 місяців тому

    Excellent video! Very well made!

  • @AlwaysWeb
    @AlwaysWeb 6 місяців тому

    💯💯💯 The best videos explaining nextjs

  • @uchennaofoma4624
    @uchennaofoma4624 2 місяці тому

    Amazing video

  • @nathanlazo814
    @nathanlazo814 6 місяців тому

    The best video I've ever seen!!!

  • @hectondomingos3264
    @hectondomingos3264 6 місяців тому

    Well made video.

  • @saifhesham3646
    @saifhesham3646 2 місяці тому

    Such awesome presentation, can you maybe do a tutorial on how do you make your presentations? also would be very grateful if you can provide the slides for this tutorial 🙏🏽

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

    Thats an amazing explanation, great video!

  • @Edu4Dev
    @Edu4Dev 6 місяців тому

    such nice hud n animations

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

    Loved your videos and the visuals are amazing

  • @thefullstackproject
    @thefullstackproject 6 місяців тому

    I wonder how you create these awsome visualizations. Great work!!

    • @Delba
      @Delba  6 місяців тому +1

      Thanks, I use Remotion.

    • @slyracoon23
      @slyracoon23 6 місяців тому

      Do you do any post editing software as well?

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

    This world needs more Delbas and LeeRobs

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

    10/10 video, great job. Thanks!

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

    This is so good, obrigado!

  • @rawallon
    @rawallon 6 місяців тому

    Excelente video, foi bem completo sem entrar em detalhes tecnicos, Vou mandar na minha empresa pra todos verem!

    • @Delba
      @Delba  6 місяців тому

      Obrigada, espero que ajude!

  • @manmandangdang
    @manmandangdang 6 місяців тому

    That was fantastic! I hit subscribe right after watching it.

    • @Delba
      @Delba  6 місяців тому

      Thanks, welcome!

  • @jordinodejs3291
    @jordinodejs3291 6 місяців тому

    Great video! I’m curious about which tool you use to present information or graphic mockups. I love them. And how long could it take to make a video as yours?

    • @Delba
      @Delba  6 місяців тому

      Thanks, I use remotion.

  • @alexjohnson-bassworship3150
    @alexjohnson-bassworship3150 6 місяців тому

    Fantastic explanation!!

  • @dinesh28
    @dinesh28 6 місяців тому

    Great explanation and presentation. Subscribed.

    • @Delba
      @Delba  6 місяців тому

      Welcome 🙏

  • @horizondevs
    @horizondevs 6 місяців тому

    amazing 👍

  • @Offiziersmesser
    @Offiziersmesser 6 місяців тому

    Content so good I felt offended that I didn't subscribe 3 minutes in!

    • @Delba
      @Delba  6 місяців тому +1

      Hah, welcome!