Серверный рендеринг

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

Сериализация

EffCSS предлагает две утилиты для сериализации таблиц стилей:

• serialize возвращает HTML-строку, содержащую теги <style> со стилями CSS,
• serializeMeta возвращает HTML-строку, содержащую теги <script type="application/json"> с метаданными.

Как правило, достаточно использовать только утилиту serialize; эти стили будут повторно использоваться на стороне клиента. Однако утилиты с контрактами (classNames и attributes) всё равно будут выполнять свой код для вычисления селекторов контрактов на стороне клиента. Если вы считаете эти вычисления ресурсоёмкими, используйте serializeMeta - тогда утилиты classNames и attributes будут использовать селекторы из метаданных без дополнительных вычислений.

Таким образом, для SSG и простого SSR достаточно использовать serialize, а для более сложных SSR необходим serializeMeta.

Пример

Ниже приведен упрощенный пример React SSR:

entry-server.ts

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 };
}

entry-client.ts

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

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

server.js

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}`);
});