Hydration Explained

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 ม.ค. 2025

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

  • @fullstack_journey
    @fullstack_journey ปีที่แล้ว +97

    Life was better when Hydration just meant drink more water

    • @pasinduvinsuka
      @pasinduvinsuka ปีที่แล้ว

      😂😂😂😂

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

      Another jokes of web application modern.LOL

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

      Life was not better but easier - in other words: less complex.

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

      😂😂

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

      yeah man wtf is this they made my code have hydration as well

  • @sheldonsays9922
    @sheldonsays9922 ปีที่แล้ว +10

    Hydration, the art of creating a problem in the 1st place and then coming up with a solution for it.

    • @awesome-coding
      @awesome-coding  ปีที่แล้ว +2

      Nicely said :) I feel like this is the entire frontend space these days :))

  • @daguttt
    @daguttt ปีที่แล้ว +13

    Nice explanation! 🚀
    Looking forward to watching a Suspense video

    • @awesome-coding
      @awesome-coding  ปีที่แล้ว

      Coming soon! Thank you for the feedback!

  • @rafaelarantes4804
    @rafaelarantes4804 ปีที่แล้ว +8

    The app shell in CSR doesn't need to be empty. It can contain important things such as a loading spinner or a skeleton to provide feedback to the user. SSR apps have a higher TTFB as the server needs to build the HTML and send it, which translates to a slower first visual feedback to the user.

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

    Super helpful and yes I would like to know more about Suspense

  • @AvaneeshKumarSingh
    @AvaneeshKumarSingh ปีที่แล้ว +1

    Clear explanation
    Waiting for suspense video

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

    very precise & to the point, would love deep dive into this

  • @Zeke_Cachi
    @Zeke_Cachi ปีที่แล้ว +1

    Yeah, a video about Suspense would be great

  • @johnsimon8158
    @johnsimon8158 ปีที่แล้ว

    great explanation of the topic, waiting on the Suspense video

    • @awesome-coding
      @awesome-coding  ปีที่แล้ว

      Coming soon! Thank you for your feedback!

  • @benjaminjameswaller
    @benjaminjameswaller ปีที่แล้ว +3

    Hi how about build-time rendering when comparing these methods?

    • @awesome-coding
      @awesome-coding  ปีที่แล้ว +1

      Hey!
      This is a really interesting question - build-time rendering will work in some scenarios, and it'll just speed up the SSR part of the process.
      The pre-built HTML code still needs to reach the server, and then hydration still happens. The idea is that the browser needs to understand those static html - what are they? are they components? what events they are triggering? what are the listeners? what's the state? - so this can only happen in the browser.

    • @benjaminjameswaller
      @benjaminjameswaller ปีที่แล้ว

      @@awesome-coding thanks for your reply .. Yes you should take a look at the Plenti project which is a build time rendering engine which ships all files in this step so technically it doesn't have that server process, so hydration is already done making builds super fast.

    • @Jantcu
      @Jantcu ปีที่แล้ว +1

      @@benjaminjameswaller The hydration still happens in the browser in Plenti, the difference is the SSR step to produce the HTML all happens upfront (at build-time) vs happening every time a request is made (On-Demand Rendering).

  • @ozanmuyes
    @ozanmuyes ปีที่แล้ว

    Yes please, a deep dice into this topic

  • @lalitsingh-de1md
    @lalitsingh-de1md 8 หลายเดือนก่อน

    keep uploading this kind information videos with meme and visual presentation ...thanks

  • @arturfil
    @arturfil ปีที่แล้ว

    Interested in suspense, amazing content!

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

    incredible explanation

    • @awesome-coding
      @awesome-coding  9 หลายเดือนก่อน

      Glad it was helpful!

  • @amrhazem378
    @amrhazem378 ปีที่แล้ว

    Awesome is Awesome as always

  • @frontstudent9858
    @frontstudent9858 ปีที่แล้ว

    Great content!
    What software do you use to produce the animations?

    • @awesome-coding
      @awesome-coding  ปีที่แล้ว

      Thank you!
      This is Adobe Photoshop & Illustrator for some of the Graphics, and Adobe Premiere for animations and putting everything together.

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

    What if i had 5 more components that need rehydration ? Does it mean 5 more web requests ?

  • @krateskim4169
    @krateskim4169 ปีที่แล้ว

    deep dive on suspense would be great

  • @TechBuddy_
    @TechBuddy_ ปีที่แล้ว +2

    Nice video but I think you should have mentioned progressive enhancement ( making shit work even in the absence of js but may not be as fancy as it could be ). Sveltekit does this pretty well IMO

    • @awesome-coding
      @awesome-coding  ปีที่แล้ว +4

      You are right - thanks for suggesting it.
      Progressive enhancement briefly explained could be an idea for a future video ✌️

    • @TechBuddy_
      @TechBuddy_ ปีที่แล้ว +1

      @@awesome-coding nice.
      hey I almost forgot your x DMS are closed ( I am not verified 🤣 ) I tried messaging you but it didn't work :)

    • @awesome-coding
      @awesome-coding  ปีที่แล้ว

      @@TechBuddy_ You should be able to reach out on X now - changed the settings.

    • @TechBuddy_
      @TechBuddy_ ปีที่แล้ว

      @@awesome-codingnice 👍

  • @KasemMohareb
    @KasemMohareb ปีที่แล้ว

    thanks ❤

  • @jaydeep-p
    @jaydeep-p ปีที่แล้ว

    The suspense is killing me 😂

  • @juanferrer5885
    @juanferrer5885 ปีที่แล้ว

    Im interest in a deep dive of this topic

  • @krateskim4169
    @krateskim4169 ปีที่แล้ว

    good video

  • @WyattLansdale-o6w
    @WyattLansdale-o6w 5 หลายเดือนก่อน

    Do a video on Qwik

    • @awesome-coding
      @awesome-coding  5 หลายเดือนก่อน

      I have quite a few of them on my channel.

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

    Fireship

  • @josephmgift
    @josephmgift ปีที่แล้ว

    I am interested.

  • @dovh49
    @dovh49 ปีที่แล้ว

    If you need to send a page directly to the consumer than maybe a framework that needs hydration isn't the right choice for you.

  • @Tomapon
    @Tomapon ปีที่แล้ว +1

    Instructions unclear, I'm still thirsty.

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

    I think you can go a bit slow especially when you are moving across different stages of the narration.

    • @awesome-coding
      @awesome-coding  7 หลายเดือนก่อน

      Will keep that in mind!
      Thank you for your feedback!

  • @nanonkay5669
    @nanonkay5669 ปีที่แล้ว

    HTMX is gonna be the future, honestly. Back to the simple basics

    • @awesome-coding
      @awesome-coding  ปีที่แล้ว

      Yep - I'm a big fan of HTMX as well (I recently posted a video on this exact topic - th-cam.com/video/huMTT5Pb8b8/w-d-xo.html)

    • @nanonkay5669
      @nanonkay5669 ปีที่แล้ว

      @@awesome-coding I once saw around that HTMX is not very secure and proof should be careful. Is that even true?

  • @jwoods9659
    @jwoods9659 ปีที่แล้ว +1

    Sounds like we are just doing too much now.

  • @fallingseasy
    @fallingseasy ปีที่แล้ว

    I'll just stick to water.php