data/docs/server-side-rendering.mdx

---
title: Server-Side Rendering
description: How to configure server-side rendering.
---

You can get access to the CSS string by using the `getCssText` function. This function is made available by the `createStitches` function.

```jsx
import { createStitches } from '@stitches/react';

export const { __getCssText__ } = createStitches();
```

The `getCssText` will give you all the CSS you need to server-side render it.

For a better hydration strategy, we highly recommend adding an `id="stitches"` to your `style` tag.

Here's an example of SSR with Next.js

```jsx line=3,10
import React from 'react';
import NextDocument, { Html, Head, Main, NextScript } from 'next/document';
import { getCssText } from 'path-to/stitches.config';

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head>
          <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
```

> Note: If using React, make sure to add your styles in `dangerouslySetInnerHTML`.