Nested framework component hydration? | Astro Lounge | Page 1

#

Hi @tawdry sand. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Yes, Astro provides a solution for this scenario. You can use Astro's hydration directives to selectively hydrate components in your React component tree. This means you can make only specific leaf nodes interactive without hydrating the entire tree.

In Astro, framework component children can also be hydrated components. This means that you can recursively nest components from any of these frameworks. However, remember that framework component files themselves (e.g. .jsx, .svelte) cannot mix multiple frameworks.

Here's an example of how you can nest components and selectively hydrate them:

---import MyReactSidebar from '../components/MyReactSidebar.jsx';
import MyReactButton from '../components/MyReactButton.jsx';
import MySvelteButton from '../components/MySvelteButton.svelte';---

<MyReactSidebar>
  <p>Here is a sidebar with some text and a button.</p>
  <div slot="actions">
    <MyReactButton client:idle />
    <MySvelteButton client:idle />
  </div>
</MyReactSidebar>

In this example, MyReactButton and MySvelteButton are hydrated when the browser is idle, but the parent MyReactSidebar component is not hydrated.

Astro components are always rendered to static HTML, even when they include framework components that are hydrated. This means that you can only pass props that don’t do any HTML rendering. Passing React’s “render props” to framework components from an Astro component will not work, because Astro components can’t provide the client runtime behavior that this pattern requires. Instead, use named slots.

#

For more information, you can refer to the Astro documentation on nesting framework components (https://docs.astro.build/en/guides/framework-components/#nesting-framework-components).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@tawdry sand kapa.ai is still learning and improving, please let us know how it did by reacting below

#Nested framework component hydration?

For more information, you can refer to the Astro documentation on nesting framework components (https://docs.astro.build/en/guides/framework-components/#nesting-framework-components).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: