Server-Side Rendering

How to configure server-side rendering.

You can get access to the CSS string by using the getCssString function. This function is made available by the createCss function.

import { createCss } from '@stitches/react';
export const { getCssString } = createCss();

The getCssString 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

import React from 'react';
import NextDocument, { Html, Head, Main, NextScript } from 'next/document';
import { getCssString } from 'path-to/stitches.config';
export default class Document extends NextDocument {
render() {
return (
<Html lang="en">
<Head>
<style id="stitches" dangerouslySetInnerHTML={{ __html: getCssString() }} />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}

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