Hydration Explained
Вставка
- Опубліковано 7 лют 2025
- A detailed explanation of the hydration process.
💬 Topics:
What is Hydration;
Why do web apps need hydration;
Client Side Rendering vs Server Side Rendering;
Hydration vs Resumability;
React Serve Components;
React Suspense;
#javascript
Patreon: / awesomeclub
Life was better when Hydration just meant drink more water
😂😂😂😂
Another jokes of web application modern.LOL
Life was not better but easier - in other words: less complex.
😂😂
yeah man wtf is this they made my code have hydration as well
Hydration, the art of creating a problem in the 1st place and then coming up with a solution for it.
Nicely said :) I feel like this is the entire frontend space these days :))
Nice explanation! 🚀
Looking forward to watching a Suspense video
Coming soon! Thank you for the feedback!
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.
You are completely right!
Clear explanation
Waiting for suspense video
Coming soon!
Super helpful and yes I would like to know more about Suspense
Thank you!
Yeah, a video about Suspense would be great
On it!
very precise & to the point, would love deep dive into this
great explanation of the topic, waiting on the Suspense video
Coming soon! Thank you for your feedback!
keep uploading this kind information videos with meme and visual presentation ...thanks
Thank you, I will!
Yes please, a deep dice into this topic
Will do!
Interested in suspense, amazing content!
More to come! Thank you!
incredible explanation
Glad it was helpful!
Awesome is Awesome as always
Thank you so much!
Great content!
What software do you use to produce the animations?
Thank you!
This is Adobe Photoshop & Illustrator for some of the Graphics, and Adobe Premiere for animations and putting everything together.
deep dive on suspense would be great
On it!
What if i had 5 more components that need rehydration ? Does it mean 5 more web requests ?
Hi how about build-time rendering when comparing these methods?
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.
@@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.
@@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).
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
You are right - thanks for suggesting it.
Progressive enhancement briefly explained could be an idea for a future video ✌️
@@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 :)
@@TechBuddy_ You should be able to reach out on X now - changed the settings.
@@awesome-codingnice 👍
Fireship
Im interest in a deep dive of this topic
Will do!
thanks ❤
You're welcome 😊
The suspense is killing me 😂
A classic dad joke!
Do a video on Qwik
I have quite a few of them on my channel.
good video
Thank you!
I am interested.
I think you can go a bit slow especially when you are moving across different stages of the narration.
Will keep that in mind!
Thank you for your feedback!
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.
That's fair!
Instructions unclear, I'm still thirsty.
🫠
HTMX is gonna be the future, honestly. Back to the simple basics
Yep - I'm a big fan of HTMX as well (I recently posted a video on this exact topic - ua-cam.com/video/huMTT5Pb8b8/v-deo.html)
@@awesome-coding I once saw around that HTMX is not very secure and proof should be careful. Is that even true?
Sounds like we are just doing too much now.
Exactly!
I'll just stick to water.php
(great video as always :D )
Thank you!