Sunucu tarafı kullanımı

Sunucu tarafında işleme (SSR)

EffCSS, stillerin sunucu tarafında kullanılmasına olanak tanır. Style provider (stil sağlayıcı), istemci tarafı için gerekli olan başlangıç ​​ayarlarını serileştirdiğinden, bu aracı hem SSR hem de SSG süreçlerinde kullanabilirsiniz.

SSR örneği

İşlem oldukça basittir; Style provider, tarayıcı ortamında olmadığını algılar ve işleyişi tıpkı istemci tarafındaki gibi simüle eder. Düzeniniz (layout) hazır olduğunda, elde edilen çıktıyı bir metin dizisine (string) dönüştürüp HTML'in <head></head> bölümüne eklemeniz yeterlidir.

İşte bir React SSR örneği.

entry-server.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) {
    // emulates Style provider methods and stores stylesheet makers
    const consumer = useStyleProvider();
    const html = renderToString(
        <StrictMode>
            <StyleProvider consumer={consumer}>
                <App />
            </StyleProvider>
        </StrictMode>
    );
    // consumer.toString returns HTML string with initial styles and
    // Style provider state
    const head = '' + consumer;
    return { html, head };
}

entry-client.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>
);

Statik site oluşturma (SSG)

useStyleProvider'a noscript: true parametresini iletmeniz yeterlidir. String'e dönüştürüldüğünde yalnızca CSS stillerini içerecektir.