Server-Side Rendering

Reference implementation

The Gatsby plugin for glaze does everything below, as observable in its source.

While prerendering a page, the CSSOM is inaccessible and thus, styles cannot be injected dynamically. However, a VirtualStyleInjector can collect the styles instead of applying them through injection:

import { StyleInjectorProvider, VirtualStyleInjector } from 'glaze';
import { renderToString } from 'react-dom/server';

import theme from './src/theme.treat';

const injector = new VirtualStyleInjector();

const html = renderToString(
  <StyleInjectorProvider injector={injector}>{element}</StyleInjectorProvider>,
);

Afterwards, the collected styles can be retrieved as a single <style> element, which should be added inside the document's <head>:

const styleEl = injector.getStyleElement();

// Framework-dependent, e.g. `setHeadComponents()` in Gatsby v2
appendToHead(styleEl);