docs(astro): Add reference to hybrid rendering in Astro

docs/integrations/databases/fauna.mdx

@@ -72,26 +72,26 @@ Don't forget to click the **Apply changes** button at the bottom right to save y
 The way to authenticate requests to Fauna with Clerk is to use a JWT. After adding the necessary claims in a JWT template, you can generate the token by calling the `getToken` method from the [`useAuth()`](/docs/references/react/use-auth) hook provided by Clerk.
 
 ```jsx
-import React from 'react';
-import { useAuth } from '@clerk/nextjs';
-import { Client, fql } from "fauna";
+import React from 'react'
+import { useAuth } from '@clerk/nextjs'
+import { Client, fql } from 'fauna'
 
 const Example = () => {
-  const { getToken } = useAuth();
-  const [message, setMessage] = React.useState('');
+  const { getToken } = useAuth()
+  const [message, setMessage] = React.useState('')
 
   const makeQuery = async () => {
-    let client;
+    let client
     try {
-      const secret = await getToken({ template: '<your-template-name>' });
-      client = new Client({ secret: secret });
-      const response = await client.query(fql`'Hello World!'`);
-      setMessage(response);
+      const secret = await getToken({ template: '<your-template-name>' })
+      client = new Client({ secret: secret })
+      const response = await client.query(fql`'Hello World!'`)
+      setMessage(response)
     } catch (error) {
-      console.error(error);
-      setMessage('Error occurred');
+      console.error(error)
+      setMessage('Error occurred')
     } finally {
-      if (client) client.close();
+      if (client) client.close()
     }
   }
 
@@ -100,10 +100,10 @@ const Example = () => {
       <button onClick={makeQuery}>Make authenticated query</button>
       <p>Message: {message}</p>
     </>
-  );
-};
+  )
+}
 
-export default Example;
+export default Example
 ```
 
 > [!NOTE]

docs/manifest.json

@@ -2241,6 +2241,11 @@
                           "title": "Read session and user data",
                           "wrap": false,
                           "href": "/docs/references/astro/read-session-data"
+                        },
+                        {
+                          "title": "Hybrid rendering",
+                          "wrap": false,
+                          "href": "/docs/references/astro/hybrid-rendering"
                         }
                       ]
                     ]

docs/quickstarts/astro.mdx

@@ -78,7 +78,7 @@ Clerk's [Astro SDK](/docs/references/astro/overview) provides a set of component
   To configure Clerk in your astro application, you will need to update your `astro.config.mjs`.
 
   - Add the Clerk integration to the `integrations` list.
-  - Install an [SSR adapter](https://docs.astro.build/en/guides/server-side-rendering/#official-adapters). This is required for the integration to work. For this quickstart we chose the [`@astrojs/node`](https://docs.astro.build/en/guides/integrations-guide/node/) adapter. You can use any Node based adapter you wish.
+  - Install an [SSR adapter](https://docs.astro.build/en/guides/server-side-rendering/#official-adapters). For this quickstart we chose the [`@astrojs/node`](https://docs.astro.build/en/guides/integrations-guide/node/) adapter. You can use any Node based adapter you wish.
   - Set `output` to `server`. This is required when deploying to a host supporting SSR.
 
   ```ts {{ filename: 'astro.config.mjs', mark: [2, 3, [6, 8]] }}

docs/references/astro/hybrid-rendering.mdx

@@ -0,0 +1,64 @@
+---
+title: Astro Hybrid Rendering
+description: Clerk supports Astro in hybrid mode out-of-the-box.
+---
+
+Astro's on-demand rendering output modes (`server` and `hybrid`) allows you to prerender certain pages while keeping others server-rendered. The Astro SDK supports Astro in hybrid mode out-of-the-box.
+
+## Server output mode
+
+When the output mode is set to `server`, pages are server-rendered on request by default. However, you can opt-in to prerendering specific pages.
+
+### Using Control Components
+
+When using control components ([`Protect`](/docs/components/protect), [`SignedIn`](/docs/components/control/signed-in), [`SignedOut`](/docs/components/control/signed-out)) in server output mode:
+
+- By default, these components will be server-rendered.
+- If you opt-in to prerendering a page by adding `export const prerender = true`, you need to add the `isStatic={true}` prop to any control components used on that page. This specifies that the component should use the client-side version which relies on the [client nanostores](/docs/references/astro/auth-store).
+
+```astro {{ filename: 'src/pages/index.astro' }}
+---
+export const prerender = true
+---
+
+<SignedIn isStatic={true}> You are signed in! </SignedIn>
+```
+
+## Hybrid output mode
+
+In `hybrid` output mode, pages are prerendered by default. You can opt-out of prerendering for specific pages to make them server-rendered.
+
+### Using Control Components
+
+When using control components in `hybrid` output mode:
+
+- By default, these components will be prerendered.
+- If you opt-out of prerendering a page by adding `export const prerender = false`, you need to add the `isStatic={false}` prop to any control components used on that page. This specifies that the component should use the server-side version which relies on the [locals](/docs/references/astro/locals) injected by the middleware.
+
+```astro {{ filename: 'src/pages/index.astro' }}
+---
+export const prerender = false
+---
+
+<SignedIn isStatic={false}> You are signed in! </SignedIn>
+```
+
+## Styling considerations
+
+When using the client-side version of control components (i.e., when `isStatic={true}`), be aware of the wrapper element. For example, the `<SignedIn>` component is wrapped in a custom element. This wrapper may affect your styling, so you might need to adjust your CSS selectors accordingly.
+
+For instance, if you want to style the content inside a `<SignedIn>` component, you might need to use a selector like this:
+
+```astro {{ filename: 'src/pages/index.astro' }}
+---
+export const prerender = true
+---
+
+<SignedIn class="signed-in" isStatic={true}> You are signed in! </SignedIn>
+
+<style global>
+  .signed-in {
+    /* Your styles for the wrapper element */
+  }
+</style>
+```