---
title: Server-side rendering
---

import { Callout } from "nextra-theme-docs";

# Server-side rendering

The `getSandpackCssText` function, which is available in the main package, is responsible for getting the Sandpack CSS string and server-side render it. Furthermore, Sandpack uses [stitches/core](https://stitches.dev/) under the hood to generate and dedupe theme variation, ensuring a consistent and lightweight CSS output.

```jsx
import { getSandpackCssText } from "@codesandbox/sandpack-react";

const cssTextOutput = getSandpackCssText();
```

## How to use it

Here's some examples of how to use in some popular React frameworks.

<Callout>
  For a better hydration strategy, we highly recommend adding an `id="sandpack"`
  to your style tag.
</Callout>

### Next.js (app dir)

[See the example project](https://github.com/codesandbox/sandpack/tree/main/examples/nextjs-app-dir)

<br />

```js
// components/sandpack-styles.tsx
"use client";

import { getSandpackCssText } from "@codesandbox/sandpack-react";
import { useServerInsertedHTML } from "next/navigation";

/**
 * Ensures CSSinJS styles are loaded server side.
 */
export const SandPackCSS = () => {
  useServerInsertedHTML(() => {
    return (
      <style
        dangerouslySetInnerHTML={{ __html: getSandpackCssText() }}
        id="sandpack"
      />
    );
  });
  return null;
};
```

<br />

```js
// app/layout.tsx

import { SandPackCSS } from "@/components/sandpack-styles";

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang="en">
      <head>
        <SandPackCSS />
      </head>
      <body>{children}</body>
    </html>
  );
}
```

<br />

```jsx
import { Sandpack } from "@codesandbox/sandpack-react";

export default function Home() {
  return (
    <div>
      <Sandpack theme="dark" />
    </div>
  );
}
```

### Next.js

[See the example project](https://github.com/codesandbox/sandpack/tree/main/examples/nextjs)

<br />

```js
// pages/_document.tsx

import { getSandpackCssText } from "@codesandbox/sandpack-react";
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <style
          dangerouslySetInnerHTML={{ __html: getSandpackCssText() }}
          id="sandpack"
          key="sandpack-css"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
```

### Gatsby

[See the example project](https://github.com/codesandbox/sandpack/tree/main/examples/gatsby)

```js
// gatsby-ssr.js
import * as React from "react";
import { getSandpackCssText } from "@codesandbox/sandpack-react";

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <style
      id="sandpack"
      key="sandpack-css"
      dangerouslySetInnerHTML={{
        __html: getSandpackCssText(),
      }}
    />,
  ]);
};
```

### Examples

Still not clear, take a look at these [examples](https://github.com/codesandbox/sandpack/tree/main/examples).
