Server side usage

Server-side rendering (SSR)

EffCSS allows to use styles on the server side. You can use it for SSR or SSG since Style provider serialize initial settings for the client side.

SSR example

It's very simple - Style provider himself will understand that he is not in the browser and will emulate the work just like on the client side. Just stringify and add to HTML <head></head> it when your layout is ready.

Here is React SSR example.

entry-server.ts

import { StrictMode } from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';
import { StyleProvider } from './styleContext.tsx';
import { useStyleProvider } from 'effcss';

export function render(_url: string) {
    // emulates Style provider methods and stores stylesheet makers
    const consumer = useStyleProvider();
    const html = renderToString(
        <StrictMode>
            <StyleProvider consumer={consumer}>
                <App />
            </StyleProvider>
        </StrictMode>
    );
    // consumer.toString returns HTML string with initial styles and
    // Style provider state
    const head = '' + consumer;
    return { html, head };
}

entry-client.ts

import { StrictMode } from 'react';
import { hydrateRoot } from 'react-dom/client';
import App from './App';
import { StyleProvider } from './styleContext.tsx';
import { useStyleProvider } from 'effcss';

const consumer = useStyleProvider();

hydrateRoot(
    document.getElementById('root'),
    <StrictMode>
        <StyleProvider consumer={consumer}>
            <App />
        </StyleProvider>
    </StrictMode>
);

Static site generation (SSG)

Just pass noscript: true to useStyleProvider. When stringified it will contain only CSS styles.