How to use <Hydration> and <NoHydration>?
Hi there,
I was reading the release notes of SolidJS 1.6.0 and it mentions new Components to handle Hydration: <Hydration> and <NoHydration> . https://github.com/solidjs/solid/releases/tag/v1.6.0
I couldn't find any further docs on them. Do they exists yet or does someone have any additional info/reference/example about how to use them?
GitHub
Release v1.6.0 - Castle in the Sky · solidjs/solid
For the past months we've been working away at SolidStart and that has led to some incredible exploration into the realm of islands, partial hydration, and hybrid routing. Solid 1.6 backfills t...
5 Replies
I don't think the docs has documented it yet. The purpose of
<NoHydration> is to suppress hydratable markup in a section of the SSR markup (specifically, the ones wrapped in <NoHydration>).
<Hydration> is just the opposite.That sounds very cool and I would love to use it. I would just like a bit more info about it. Like
- does that mean I don't have to call
hydrate anymore on the client side?
- will using <NoHydration> in a SSR setting mean that the the code for the children of <NoHydration> will automatically be stripped out of the client bundle?
Maybe I have to wait for the docs for it.does that mean I don't have to call hydrate anymore on the client side?You'd only do that if your build target is not hydratable as a whole. SolidJS has a compilation option for this, but I'm not sure what setup are you using. The main purpose of this is so that static content in the server would remain static in the client and so that it can skip hydration (since it's unnecessary). If your entire app isn't static but only sections of it, you still need to use
hydrate
- will using <NoHydration> in a SSR setting mean that the the code for the children of <NoHydration> will automatically be stripped out of the client bundle?No. There's no bundler magic involved here. It's literally just preventing the SSR output to be hydratable
Hydration in solid uses data-hk attributes and a script running the reactive code on the elements marked with them.
<NoHydration> disabled the attributes and thus the vibrations, <Hydration> enables them again inside a block without hydration.
Got it, thanks for clarifying.