How do solid framework components work

[gilded jolt]

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

---

SolidJS framework components in Astro work similarly to other UI framework components. Here’s how they function and how they are mounted:

1. Rendering and Hydration

   • By default, when you use a SolidJS component in an Astro project, it is rendered on the server to static HTML. This is useful for non-interactive components and avoids sending unnecessary JavaScript to the client.
   • If you want your SolidJS component to be interactive in the browser, you add a client:* directive (e.g., client:load, client:idle, client:visible). This tells Astro to send the component’s JavaScript to the browser and hydrate it, making it interactive. Hydration means the component is mounted and becomes interactive on the client side at the time specified by the directive (e.g., when the page loads, when idle, or when visible) Hydrating interactive components.

2. Mounting Process

   • When a SolidJS component is hydrated, Astro ensures the necessary JavaScript (including the SolidJS runtime) is loaded in the browser. The component is then mounted and becomes interactive according to the hydration directive you used.
   • For server-only and hydrating components, Astro automatically wraps them in a top-level Suspense boundary and renders them on the server using Solid’s renderToStringAsync. This means async data (e.g., fetched with Solid’s createResource) is included in the initial HTML Usage: Suspense Boundaries.

3. Usage Example

   • Import your SolidJS component in your Astro file and use it like any other component. For interactivity, add a client directive:

     ---import MySolidComponent from '../components/MySolidComponent.jsx';---
     <MySolidComponent client:load />
     

   • This will render the component on the server and hydrate (mount) it on the client when the page loads.

4. Mixing Frameworks

   • Astro allows you to use multiple frameworks (React, Solid, etc.) in the same project. You can specify which files belong to which framework using the include option in your astro.config.mjs Combining multiple JSX frameworks.

In summary, SolidJS components in Astro are rendered to static HTML by default and become interactive (mounted) in the browser when you use a client:* directive. Astro handles the server-side rendering and client-side hydration/mounting for you Front-end frameworks.

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

@swift wolf Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[swift wolf]

@gilded jolt when can we start using zod 4 ?

[gilded jolt]

Let me check the knowledge base for you again. One moment! :books:

---

I'm sorry, but the knowledge sources do not contain any information about "zod 4" or when it can be used with Astro. The documentation only references the use of Zod for schema validation in content collections and live content collections, but does not specify supported Zod versions or mention "zod 4" specifically (Defining the collection schema, Using Zod schemas). If you need details about Zod version compatibility, you may need to consult the official Astro or Zod changelogs or repositories.

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