What is Hydration?
Vložit
- čas přidán 26. 08. 2024
- Hydration bridges the Server-Side Rendering and Server-side Rendering.
So what is it? Why someone people thing that hydration is inefficient? and what is the future for hydration?
---
What is Client-side Rendering and Server-side Rendering? • What is Client-Side Re...
StackOverflow answer stackoverflow....
🎧 SvelteKit Tutorial For Beginners • SvelteKit Tutorial For...
🎧 Svelte Tutorial for Beginners • Svelte Tutorial for Be...
📚 SvelteKit kit.svelte.dev
📚 Svelte svelte.dev
🥰 Support me www.buymeacoff...
🔗 Want to learn more from me? Check out these links:
Twitter: / lihautan
Blog: lihautan.com/
Newsletter: lihautan.com/n...
Discord: / discord
VS Code Theme: Dracula at night marketplace.vi...
ZSH Theme: bullet-train github.com/cai...
#sveltekit #svelte #sveltekitbeginner #sveltekittutorial
Thanks for watching 🥰 -- with love, Li Hau
This is the best explanation of hydration I have seen so far. Not only you explain the history context but also answer many questions that one might have, like "why don't we, instead of reconciling the whole application tree, just 'hydrate' the necessary buttons and skip any non-interactive part" --> Because it is hard to tell which part is truly non-interactive without overseeing the creation of everything top to bottom. And also great touch on React Server Components and how it differs from 'hydration' --> RSC truly selectively hydrated only the interactive parts without re-conciliating the whole DOM. Great video
This is the best explainer on hydration I have seen so far. Thank you for this great content.
Very well explained! I didn't know much about the concept before, and now I have a good overview. Thanks!
Glad it was helpful!
This is a brilliant explanation! Please keep up this channel.
Thank you. Excellent. Please, continue producing Svelte and SvelteKit video's.😄
Nice wrap up. While the concept is easy to understand, I like that you point out the difficulties that might come up in the end of the video.
thanks :)
Hello hello…
@@adeniran hello hello
great content, thank you :) If possible can you show things practically. Also, when we hit issues like mismatch hydration nodes, etc..
Fantastic video, thank you ! 👍👍
This is a gem!
I wonder: Is the opposite of “hydrated” then “pickled?” 😅 I remember Python uses this term a lot and it always stuck with me, hehe.
that's a good one!
Wow amazing, Learn a lot from you :) thank you. And also, may I request a Video about props vs slots, I mean the best practice about it, I ended up to always use props on my project because can't find if using slots will be appropriate for it, once again, thank you
Hmm. There's nothing wrong of using props instead of slots, if it fits your use case better. I wonder, if is there any pain points / ambiguity using slots, that lead u to avois using slots and use props instead?
@@lihautan Right, It's because still unclear for me, I mean, Props and slot used to pass data but the difference is, slot are more flexible because we could pass markup too. but I always end up to use props only because it's still unclear for me what's the benefit of using slot instead of props, so my brain automatically prefer props instead.
Thank you in advance lihautan, I've been your fans since you give a talk on svelte indonesia (about svelte compiler), you have share a valuable knowledge so beginner like me could keep up and fall in love with svelte, so once again thank you
@@sugihwarascom In Svelte slots are used as a placeholder where a component places "nested content" (which could be another component) that is passed in (the child position, similar to elements) by its container component.
component
..nested
endcomponent
Slots can be named if more than one is needed.
Each slot can expose data values from the component to the "nested content" which can be bound to with the let: directive (e.g. to the props of the nested component).
The concept was inspired by the Web Component Slot element. It serves the same function as a render prop in React but slots preserve the look and feel of an HTML parent element with it's children where the "children" (the nested content) are then placed into the component's slot(s) and connected to the component's data values (with let:).
Thanks!
you are very welcome :)
Loved the pizza example
i would like to know how hydration mismatches are made
Hi li, how do I get a job working with Svelte?
There's a job channel in the Svelte Discord server svelte.dev/chat
Hydration is :D the watering of the plants with a spray bottle. Psst pstt pstt!
💦🌱
@@lihautan can you please update the discord channel link? it's expired.
i've updated the link!!
@@lihautan thank you
everything was good expect the accent .. u speak like fast chinese
Oopsss