Использование на сервере
Рендеринг на сервере (SSR)
EffCSS позволяет использовать стили на стороне сервера. Вы можете использовать его для SSR или SSG, поскольку на стороне сервера Style consumer сериализует начальные настройки для Style provider.
Пример SSR
Все очень просто - Style consumer сам поймет, что он не в браузере, и будет эмулировать работу Style provider. Когда ваш серверный рендеринг завершится, просто приведите Style consumer к строке и добавьте полученный результат в шапку серверной верстки (<head></head>).
Например, так выглядит React SSR.
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 };
}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.