Uso en el servidor
Renderizado del lado del servidor (SSR)
EffCSS permite usar estilos en el servidor. Puedes usarlo para SSR o SSG, ya que el Proveedor de estilos serializa la configuración inicial para el cliente.
Ejemplo de SSR
Es muy sencillo: el propio Proveedor de estilos detectará que no está en el navegador y emulará el funcionamiento como si estuviera en el cliente. Simplemente conviértelo a cadena y agrégalo a la etiqueta <head></head> de HTML cuando tu diseño esté listo.
Aquí hay un ejemplo de 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) {
// 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 };
}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>
);Generación de sitios estáticos (SSG)
Simplemente pasa noscript: true a useStyleProvider. Al convertirlo a cadena, contendrá únicamente estilos CSS.