# Astro hybrid rendering

Astro's on-demand rendering output modes (`server` and `hybrid`) allow you to pre-render certain pages while keeping others server-rendered. The Clerk Astro SDK supports these output modes out-of-the-box; no additional configuration is required. However, you may need to make some adjustments to your code to ensure that the [control components](https://clerk.com/docs/reference/components/overview.md#control-components) are rendered correctly in hybrid mode.

## Server output mode

In `server` output mode, pages and control components are server-rendered by default, but you can opt-in to pre-rendering specific pages by adding `export const prerender = true` to the page. When you opt-in to pre-rendering a page, you must add `isStatic={true}` to any control components used on that page. This specifies that the component should use the client-side version, which relies on [client nanostores](https://clerk.com/docs/reference/astro/client-side-helpers/auth-store.md).

The following example shows how to opt-in to pre-rendering a page and specify that the control components used on that page should use the client-side version.

filename: src/pages/index.astro
```astro
---
export const prerender = true
---

<Show when="signed-in" isStatic={true}> You are signed in! </Show>
```

## Hybrid output mode

In `hybrid` output mode, pages and control components are pre-rendered by default, but you can opt-out of pre-rendering for specific pages by adding `export const prerender = false`. When you opt-out of pre-rendering a page, you must 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](https://clerk.com/docs/reference/astro/locals.md) injected by the middleware.

The following example shows how to opt-out of pre-rendering a page and specify that the control components used on that page should use the server-side version.

filename: src/pages/index.astro
```astro
---
export const prerender = false
---

<Show when="signed-in" isStatic={false}> You are signed in! </Show>
```

## Styling considerations

If you pass `isStatic={true}` to a control component and you want to style the component, be aware that the component is wrapped in a custom element.

For example, say you were trying to align the content inside a `<Show when="signed-in">` component using `flex`, as shown in the following code:

```jsx
<div className="flex items-center">
  <Show when="signed-in" isStatic={true}>
    <span>You are signed in!</span>
  </Show>
  <span>This content is always visible.</span>
</div>
```

It would be rendered as:

```html
<div className="flex items-center">
  <clerk-signed-in>
    <span>You are signed in!</span>
  </clerk-signed-in>
  <span>This content is always visible.</span>
</div>
```

The `clerk-signed-in` wrapper wouldn't be a flex item by default, potentially misaligning the content. To fix this, you would need to apply flex properties to the `<Show when="signed-in">` component itself by using a selector, as shown in the following example:

```jsx
<div class="flex items-center">
  <Show when="signed-in" isStatic={true} class="flex items-center">
    <span>User</span>
  </Show>
  <span>Always visible</span>
</div>
```

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)