服务器端渲染

EffCSS 允许在服务器端创建样式表。您可以序列化样式和元数据，并将其用于服务器端渲染 (SSR) 或静态站点生成 (SSG)。

序列化

EffCSS 提供了两个用于序列化样式表的实用工具：

serialize 返回一个包含带有 CSS 样式的 <style> 标签的 HTML 字符串，
serializeMeta 返回一个包含带有元数据的 <script type="application/json"> 标签的 HTML 字符串。

通常情况下，仅使用 serialize 工具就足够了；这些样式将在客户端重用。但是，合约工具（classNames 和 attributes）仍然会执行其代码来计算合约选择器。如果您发现这些计算消耗资源过多，请使用 serializeMeta；这样，classNames 和 attributes 工具将直接使用元数据中的选择器，而无需进行额外的计算。

因此，对于 SSG 和简单的 SSR，使用 serialize 就足够了，而对于高级 SSR，则需要 serializeMeta。

例子

以下是一个简化的React SSR示例：

entry-server.tsentry-client.tsserver.js

import { StrictMode } from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';
import { serialize, serializeMeta } from 'effcss';


export function render(_url) {
  const html = renderToString(
    <StrictMode>
      <App />
    </StrictMode>
  );
  const styles = serialize();
  const metadata = serializeMeta();
  const head = styles + metadata;
  return { html, head };
}

import { StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import App from "./App";

hydrateRoot(
    document.getElementById("root"),
    <StrictMode>
        <App />
    </StrictMode>
);

import fs from "node:fs/promises";
import express from "express";

const app = express();

// There should be constants and server settings here, 
// but rendering is more important for this example

// Serve HTML
app.use("*all", async (req, res) => {
    try {
        const url = req.originalUrl.replace(base, "");

        let template;
        let render;
        if (!isProduction) {
            template = await fs.readFile("./index.html", "utf-8");
            template = await vite.transformIndexHtml(url, template);
            render = (await vite.ssrLoadModule("/src/entry-server.tsx")).render;
        } else {
            template = templateHtml;
            render = (await import("./dist/server/entry-server.js")).render;
        }

        const rendered = await render(url);

        const source = template.replace(`<!--app-html-->`, rendered.html ?? "");
        const html = source.replace(`<!--app-head-->`, rendered.head ?? "");
        res.status(200).set({ "Content-Type": "text/html" }).send(html);
    } catch (e) {
        vite?.ssrFixStacktrace(e);
        res.status(500).end(e.stack);
    }
});

// Start http server
app.listen(port, () => {
    console.log(`Server started at http://localhost:${port}`);
});

服务器端渲染 ​

序列化 ​

例子 ​

服务器端渲染

序列化

例子