服务器端使用情况
服务器端渲染（SSR）
EffCSS 允许在服务器端使用样式。由于 Style provider 会序列化客户端的初始设置，因此您可以将其用于 SSR 或 SSG。
SSR 示例
非常简单-Style provider 本身会识别出它不在浏览器中，并会像在客户端一样模拟其工作方式。布局完成后，只需将其字符串化，然后添加到 HTML 的 <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) {
// 模拟样式提供程序方法并存储样式表生成器
const consumer = useStyleProvider();
const html = renderToString(
<StrictMode>
<StyleProvider consumer={consumer}>
<App />
</StyleProvider>
</StrictMode>
);
// consumer.toString
// 返回带有初始样式和样式提供程序状态的 HTML 字符串
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>
);静态站点生成（SSG）
只需将 noscript: true 传递给 useStyleProvider 即可。字符串化后，它将只包含 CSS 样式。