#Can you hydrate Framework Components outside of an Astro Component?

19 messages · Page 1 of 1 (latest)

astral wedge
#

I want to render most of my website using Framework Components so that the only Astro Component is the one that's required for the static routing to work. The only thing that Astro Component will do is load a Framework Component that handles everything. Doing it this way sounds like I'll need to make the entire page use client:load instead of being able to mark nested components to hydrate.

Is it possible to hydrate nested Framework Components with client:load? I'm trying to avoid using the client:load on a Framework Component, when I only want one of it's children 3 layers deep to hydrate.

rare robin
#

It's not possible to exclusively hydrate nested framework components, it's all the component tree or nothing.
One alternative I'm thinking about is to pass the framework components you want to hydrate as slots to your parent framework component and only apply client directives on them instead of the parent framework component

astral wedge
#

I'm thinking I could probably use my Frameworks SSR capabilities to work around this

#

I'm using SolidJS. I think I could use it's non-javascript capabilities to similate Astro and use their hydrate feature to do this

rare robin
#

Oh didn't know that solid has that feature, TIL

astral wedge
#

if you're interested, the first paragraph seems to sum it up

rare robin
#

Looks like this will render the whole component tree as string though

#

Oh nvm, just saw the hydrate function

astral wedge
#

I could use hydrate only where needed

#

I'm not very experienced implementing SSR myself though

rare robin
#

Keep me updated, this looks interesting but I don't have enough time to try this rn

astral wedge
#

for sure! I'll do some tests

#

ty

astral wedge
#

Hi again, I've been messing around with this for the last day and it seems like nested Framework Components don't get hydrated. Only the direct components themselves do. At least in SolidJS

smoky cloud
#

Hi @astral wedge with React I can hydrate nested components, they are nested in the .astro file like so:

<!-- .astro file -->

<Layout>
  <MyReactComponent>
    <MyChildReactComponent client:idle />
  </MyReactComponent>
</Layout>
#

I can only choose which components to hydrate from within the .astro file though - as expected.

rare robin
astral wedge