Sunucu taraflı işleme

EffCSS, sunucu tarafında stil sayfaları oluşturmanıza olanak tanır. Stil ve meta verileri serileştirebilir; bunları sunucu taraflı işleme (SSR) veya statik site oluşturma (SSG) süreçlerinde kullanabilirsiniz.

Serileştirme

EffCSS, stil sayfalarını serileştirmek için iki yardımcı araç sunar:

• serialize, CSS stillerini içeren <style> etiketlerini barındıran bir HTML dizgesi döndürür,
• serializeMeta, meta verileri içeren <script type="application/json"> etiketlerini barındıran bir HTML dizgesi döndürür.

Genellikle yalnızca serialize aracını kullanmak yeterlidir; bu stiller istemci tarafında yeniden kullanılacaktır. Ancak, sözleşme yardımcı araçları (classNames ve attributes), sözleşme seçicilerini hesaplamak için kodlarını çalıştırmaya devam edecektir. Eğer bu hesaplamaların çok fazla kaynak tükettiğini düşünüyorsanız serializeMeta kullanın; bu sayede classNames ve attributes araçları, ek hesaplamalara gerek kalmadan meta verideki seçicileri kullanacaktır.

Sonuç olarak, SSG ve basit SSR senaryolarında serialize kullanımı yeterliyken, gelişmiş SSR senaryolarında serializeMeta gereklidir.

Örnek

Aşağıda basitleştirilmiş bir React SSR örneği yer almaktadır:

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