Использование на сервере

Рендеринг на сервере (SSR)

EffCSS позволяет использовать стили на стороне сервера. Вы можете использовать его для SSR или SSG, поскольку на стороне сервера Style provider сериализует начальные настройки для страницы в браузере.

Пример SSR

Все очень просто - Style provider сам поймет, что он не в браузере, и будет эмулировать работу веб-компонента. Когда ваш серверный рендеринг завершится, просто приведите Style provider к строке и добавьте полученный результат в шапку серверной верстки (<head></head>).

Например, так выглядит React SSR.

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) {
    // эмулирует методы Style provider и хранит функции `StyleSheet maker` таблиц стилей
    const consumer = useStyleProvider();
    const html = renderToString(
        <StrictMode>
            <StyleProvider consumer={consumer}>
                <App />
            </StyleProvider>
        </StrictMode>
    );
    // consumer.toString возвращает HTML-строку с начальными стилями и
    // состоянием Style provider
    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>
);

Создание статического сайта

Просто передайте noscript: true в useStyleProvider. После преобразования в строку результат будет содержать только стили CSS.