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

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 พ.ย. 2024

ความคิดเห็น • 276

  • @real-oppenheimer
    @real-oppenheimer 9 หลายเดือนก่อน +183

    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 9 หลายเดือนก่อน +2

      billions spent right

    • @Delba
      @Delba  9 หลายเดือนก่อน +14

      Thank you for saying that, I appreciate it 🙏

  • @shaheermansoor2560
    @shaheermansoor2560 21 วันที่ผ่านมา +3

    Hell na! Million dollar production quality and 25k subs. You really deserve audience in millions. You are the definition of underrated.

  • @JohnBuildWebsites
    @JohnBuildWebsites 9 หลายเดือนก่อน +38

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

    • @Delba
      @Delba  9 หลายเดือนก่อน +2

      Appreciate you so 🙏

  • @christophercaldwell6641
    @christophercaldwell6641 9 หลายเดือนก่อน +26

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

    • @govindpvenu
      @govindpvenu 2 หลายเดือนก่อน +2

      They actually did !!!

  • @Foused87
    @Foused87 9 หลายเดือนก่อน +7

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

    • @Delba
      @Delba  9 หลายเดือนก่อน +1

      lol, appreciate you saying so 🙏

  • @Yadiel458x
    @Yadiel458x 9 หลายเดือนก่อน +25

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

  • @toptrends88
    @toptrends88 หลายเดือนก่อน +1

    As a visual learner, this helps me quickly grasp the concepts and watch a tutorial without getting bored. Keep up the good work!

    • @Delba
      @Delba  หลายเดือนก่อน

      Thank you, appreciate it!

  • @lorisquesado6468
    @lorisquesado6468 หลายเดือนก่อน +1

    I'm gonna be honest, this is the greatest ultra high quality video I've EVER seen on a concept. From the bottom of my IT Heart : Well Done !

    • @Delba
      @Delba  หลายเดือนก่อน

      thanks I appreciate it!

  • @ammarhalees6370
    @ammarhalees6370 4 หลายเดือนก่อน +2

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

  • @anil97
    @anil97 9 หลายเดือนก่อน +7

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

  • @liendwin
    @liendwin 9 หลายเดือนก่อน +13

    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 7 หลายเดือนก่อน

      cof cof trpc cof cof

  • @nicholasprice5137
    @nicholasprice5137 6 หลายเดือนก่อน +2

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

    • @Delba
      @Delba  6 หลายเดือนก่อน +1

      Thank you, I appreciate it!

  • @tomspatula616
    @tomspatula616 8 หลายเดือนก่อน +1

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

    • @Delba
      @Delba  7 หลายเดือนก่อน +1

      Glad to hear it, welcome!

  • @pplytas
    @pplytas 9 หลายเดือนก่อน +4

    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  9 หลายเดือนก่อน

      Thank you, I appreciate it.

  • @moyezrabbani637
    @moyezrabbani637 9 หลายเดือนก่อน +3

    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  9 หลายเดือนก่อน

      Thank you! Welcome.

  • @MikeMansourTech
    @MikeMansourTech 9 หลายเดือนก่อน

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

  • @tradfluteman
    @tradfluteman 9 หลายเดือนก่อน +2

    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  9 หลายเดือนก่อน

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

  • @stockmarketwizard9781
    @stockmarketwizard9781 8 หลายเดือนก่อน

    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

  • @deku_nattsu
    @deku_nattsu 9 หลายเดือนก่อน +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  9 หลายเดือนก่อน

      Thank you! We'll be here :D

  • @vandhuymartins9481
    @vandhuymartins9481 9 หลายเดือนก่อน +1

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

    • @Delba
      @Delba  9 หลายเดือนก่อน

      Thank you!

  • @XrVwxLF91Q
    @XrVwxLF91Q 9 หลายเดือนก่อน +5

    Next-level clarity. Really enjoyed this video!

  • @MyBrainForYou
    @MyBrainForYou 7 หลายเดือนก่อน

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

    • @Delba
      @Delba  7 หลายเดือนก่อน

      🤛

  • @tauhid97k
    @tauhid97k 9 หลายเดือนก่อน +1

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

  • @trueberryless
    @trueberryless 9 หลายเดือนก่อน +1

    This video quality is truly remarkable! ❤

  • @greob
    @greob 9 หลายเดือนก่อน +26

    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  9 หลายเดือนก่อน +2

      Appreciate the kind words 🙏

  • @govindpvenu
    @govindpvenu 2 หลายเดือนก่อน

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

  • @MuhammadHaseebAhmed
    @MuhammadHaseebAhmed 9 หลายเดือนก่อน +1

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

    • @Delba
      @Delba  9 หลายเดือนก่อน +1

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

  • @continuouslearner
    @continuouslearner 9 หลายเดือนก่อน +3

    Holy God what did I just watch, this is amazing

  • @saisreenivassonthena9901
    @saisreenivassonthena9901 3 หลายเดือนก่อน

    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

    • @saisreenivassonthena9901
      @saisreenivassonthena9901 3 หลายเดือนก่อน

      and yhea, after many years, a new youtuber I subscribed :D

  • @Maolo92
    @Maolo92 13 วันที่ผ่านมา

    Finally Next.js might be actually usable after this one, no more clicking and then waiting for the next route to load

  • @filipniklas
    @filipniklas 9 หลายเดือนก่อน +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!

  • @rewazilol
    @rewazilol 2 หลายเดือนก่อน +1

    This was so good. Like, incredible. Please keep making these.

  • @bibartaks
    @bibartaks 9 หลายเดือนก่อน +6

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

  • @rafaelrcamargo
    @rafaelrcamargo 8 หลายเดือนก่อน

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

    • @Delba
      @Delba  7 หลายเดือนก่อน +1

      Haha, thanks!

  • @hifzazafar9307
    @hifzazafar9307 8 หลายเดือนก่อน

    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  7 หลายเดือนก่อน

      Thank you!

  • @Nightizm
    @Nightizm 9 หลายเดือนก่อน +2

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

    • @Delba
      @Delba  9 หลายเดือนก่อน

      Thanks, I use Remotion.

  • @nicholaschu203
    @nicholaschu203 7 หลายเดือนก่อน

    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!

  • @DominikSipowicz
    @DominikSipowicz 9 หลายเดือนก่อน +2

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

    • @Delba
      @Delba  9 หลายเดือนก่อน

      Appreciate it Dom 🙏

  • @CharlieKiloSierra8893
    @CharlieKiloSierra8893 9 หลายเดือนก่อน

    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  9 หลายเดือนก่อน

      Thank you!

  • @freenrg888
    @freenrg888 6 หลายเดือนก่อน

    The visuals are astonishing. Fantastic work, Delba.

    • @Delba
      @Delba  6 หลายเดือนก่อน

      Thank you!

  • @codeChuck
    @codeChuck 9 หลายเดือนก่อน

    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  9 หลายเดือนก่อน +2

      We tackle the same problems from different angles.

  • @smithrockford-dv1nb
    @smithrockford-dv1nb 5 หลายเดือนก่อน

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

  • @SamSedighian
    @SamSedighian 4 หลายเดือนก่อน

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

  • @amanmavai99
    @amanmavai99 7 หลายเดือนก่อน

    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.

  • @drujas
    @drujas 9 หลายเดือนก่อน

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

  • @stacked-dev
    @stacked-dev 9 หลายเดือนก่อน

    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

  • @haithamaleryani8279
    @haithamaleryani8279 8 หลายเดือนก่อน

    The BEST Tutorial I ever seen .

  • @SumanthPagidipalli
    @SumanthPagidipalli 9 หลายเดือนก่อน

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

  • @fauzanr..
    @fauzanr.. 9 หลายเดือนก่อน

    the visualization is so good

  • @anbarasu1997
    @anbarasu1997 9 หลายเดือนก่อน

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

  • @jimmyj.6792
    @jimmyj.6792 9 หลายเดือนก่อน

    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  9 หลายเดือนก่อน +1

      Thank you! Glad to hear it.

  • @pablofernandezruiz8024
    @pablofernandezruiz8024 9 หลายเดือนก่อน

    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 😄

  • @TheAkiller101
    @TheAkiller101 9 หลายเดือนก่อน

    absolutely love your style of explanation

  • @ColinRosati-f2n
    @ColinRosati-f2n หลายเดือนก่อน

    Fantastic explanation and history!

  • @48595157484812
    @48595157484812 9 หลายเดือนก่อน

    good pace, good visuals, thank you for the video

  • @awksomeid6965
    @awksomeid6965 9 หลายเดือนก่อน

    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  9 หลายเดือนก่อน

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

  • @bluehawkfire55
    @bluehawkfire55 7 หลายเดือนก่อน

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

    • @Delba
      @Delba  7 หลายเดือนก่อน

      Glad to hear it!

  • @devanshgarg31
    @devanshgarg31 2 หลายเดือนก่อน

    DAMN. THE BEST VIDEO ON CSR, SSR

  • @radosvet93
    @radosvet93 7 หลายเดือนก่อน

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

  • @yurii_kozlov
    @yurii_kozlov 17 วันที่ผ่านมา

    Amazing explanation and the way it's done!👍

  • @Ayoubased
    @Ayoubased 9 หลายเดือนก่อน

    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  9 หลายเดือนก่อน

      All. The. Time.

  • @ignacior98
    @ignacior98 9 หลายเดือนก่อน

    Incredibly helpful explanation

    • @Delba
      @Delba  9 หลายเดือนก่อน

      Glad to hear it!

  • @b3rking
    @b3rking 9 หลายเดือนก่อน

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

    • @Delba
      @Delba  9 หลายเดือนก่อน

      Thank you. Welcome!

  • @gabrielbianchi2246
    @gabrielbianchi2246 9 หลายเดือนก่อน

    This world needs more Delbas and LeeRobs

  • @taffoo
    @taffoo 5 หลายเดือนก่อน

    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! 🤩

  • @hankersoree
    @hankersoree 8 หลายเดือนก่อน

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

  • @essawy897
    @essawy897 9 หลายเดือนก่อน

    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  9 หลายเดือนก่อน

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

  • @EmmanuelOdii80
    @EmmanuelOdii80 หลายเดือนก่อน

    You should receive an award from Vercel.

  • @emilia1520
    @emilia1520 7 หลายเดือนก่อน

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

    • @Delba
      @Delba  6 หลายเดือนก่อน

      Thanks, welcome!

  • @mcCorn6478
    @mcCorn6478 9 หลายเดือนก่อน

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

  •  9 หลายเดือนก่อน

    Amazing presentation, and very good featured.

  • @faraonch
    @faraonch 9 หลายเดือนก่อน

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

  • @rafishaik503
    @rafishaik503 9 หลายเดือนก่อน

    Wonderful explanation with beautiful slides. ❤

  • @taiwojolomi
    @taiwojolomi 9 หลายเดือนก่อน

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

    • @Delba
      @Delba  9 หลายเดือนก่อน

      Glad to hear it!

  • @bat-erdenekhashbat1205
    @bat-erdenekhashbat1205 9 หลายเดือนก่อน

    content quality is perfect. thanks

  • @markusfeljofsen8345
    @markusfeljofsen8345 9 หลายเดือนก่อน

    Very good explanation

  • @jordinodejs3291
    @jordinodejs3291 9 หลายเดือนก่อน

    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  9 หลายเดือนก่อน

      Thanks, I use remotion.

  • @VadimTi320
    @VadimTi320 9 หลายเดือนก่อน

    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

  • @commandcodes
    @commandcodes 16 วันที่ผ่านมา

    This is a really cool explanation

  • @NarcisMM
    @NarcisMM 9 หลายเดือนก่อน

    This was a great presentation

  • @AlwaysWeb
    @AlwaysWeb 9 หลายเดือนก่อน

    💯💯💯 The best videos explaining nextjs

  • @Johnny-rf4iu
    @Johnny-rf4iu 9 หลายเดือนก่อน

    Wow the explaination and visualization

  • @rawallon
    @rawallon 9 หลายเดือนก่อน

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

    • @Delba
      @Delba  9 หลายเดือนก่อน

      Obrigada, espero que ajude!

  • @aaditya_ai
    @aaditya_ai 9 หลายเดือนก่อน

    Keep em coming!
    Loving these type of videos 🎉❤

  • @MilindMishra
    @MilindMishra 9 หลายเดือนก่อน

    wow so amazing! kudos to the effort building this!

    • @Delba
      @Delba  9 หลายเดือนก่อน

      Thank you so much!

  • @mdrakibul4052
    @mdrakibul4052 8 หลายเดือนก่อน

    thank you very much for excellent explanation 💗

  • @ItzluciferAloneboy-jg3xx
    @ItzluciferAloneboy-jg3xx 15 วันที่ผ่านมา

    thx soo much love from India

  • @codewithidan
    @codewithidan 9 หลายเดือนก่อน

    I love the visualization and explanation!
    How have you did these visualizations? looks awesome

    • @Delba
      @Delba  9 หลายเดือนก่อน +1

      Thank you, I use Remotion.

  • @xavimc9794
    @xavimc9794 8 หลายเดือนก่อน

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

    • @Delba
      @Delba  7 หลายเดือนก่อน

      Thank you. Welcome!

  • @gauravr4127
    @gauravr4127 9 หลายเดือนก่อน

    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  9 หลายเดือนก่อน

      Thank you! Working on it.

  • @brianruizy
    @brianruizy 9 หลายเดือนก่อน

    these animations are awesome! Do you do them yourself?

    • @Delba
      @Delba  9 หลายเดือนก่อน

      Thank you! Yes :)

  • @Offiziersmesser
    @Offiziersmesser 9 หลายเดือนก่อน

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

    • @Delba
      @Delba  9 หลายเดือนก่อน +1

      Hah, welcome!

  • @thefullstackproject
    @thefullstackproject 9 หลายเดือนก่อน

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

    • @Delba
      @Delba  9 หลายเดือนก่อน +1

      Thanks, I use Remotion.

    • @slyracoon23
      @slyracoon23 9 หลายเดือนก่อน

      Do you do any post editing software as well?

  • @stefan1397
    @stefan1397 8 หลายเดือนก่อน

    Excellent video! Very well made!

  • @theSlavenIvanov
    @theSlavenIvanov 8 หลายเดือนก่อน

    Hi Delba, amazing video! Would you consider open sourcing the remotion code you wrote to make the video?

    • @Delba
      @Delba  7 หลายเดือนก่อน

      Thank you! Not right now but maybe in the future.

  • @DanhezCode
    @DanhezCode 12 วันที่ผ่านมา

    Important question: Next.js is supposed to know when a component is dynamic when it accesses an API or dynamic content as parameters to work correctly, if so how would it work with internationalization? Because it is necessary to access the “locale” or “lang” parameter in practically all content and therefore you would have to wait for this parameter. In that case I would mark it as dynamic and the partial prerender would not work because it would have to wait.

  • @uixmat
    @uixmat 9 หลายเดือนก่อน

    OOO Delba u legend, was just reading up on this and u smash a vid online! :D

  • @molcay8355
    @molcay8355 5 หลายเดือนก่อน

    Amazing video! Incredible explanation. May I ask if there are any specific tool or after effects plugin you (or the animator) use for these videos?

    • @Delba
      @Delba  5 หลายเดือนก่อน

      Thank you, I use Remotion ☺️

  • @benjaminsombi9519
    @benjaminsombi9519 9 หลายเดือนก่อน

    Excellent explanation of the concept. Would you share the tools you used for creating the visualisations and animations?

    • @Delba
      @Delba  9 หลายเดือนก่อน

      Thank you, I use Remotion.

    • @benjaminsombi9519
      @benjaminsombi9519 9 หลายเดือนก่อน

      @@Delba Thank you.

  • @juanferrer5885
    @juanferrer5885 9 หลายเดือนก่อน

    Thats an amazing explanation, great video!