Renderizado del lado del servidor

EffCSS permite crear hojas de estilo en el servidor. Puedes serializar estilos y metadatos y utilizarlos para la renderización del lado del servidor o la generación de sitios estáticos.

Publicación por entregas

EffCSS ofrece dos utilidades para serializar hojas de estilo:

• serialize devuelve una cadena HTML que contiene etiquetas <style> con estilos CSS.
• serializeMeta devuelve una cadena HTML que contiene etiquetas <script type="application/json"> con metadatos.

Normalmente, basta con usar la utilidad serialize; estos estilos se reutilizarán en el lado del cliente. Sin embargo, las utilidades de contrato (classNames y attributes) seguirán ejecutando su código para calcular los selectores de contrato. Si estos cálculos consumen muchos recursos, utilice serializeMeta; de esta forma, las utilidades classNames y attributes usarán los selectores de los metadatos sin cálculos adicionales.

Por lo tanto, para la generación de sitios estáticos y la representación simple del lado del servidor, basta con usar serialize, y se necesita serializeMeta para la representación avanzada del lado del servidor.

Ejemplo

A continuación se muestra un ejemplo simplificado de 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}`);
});