Renderizado del lado del cliente

EffCSS ya se ejecuta en el lado del cliente sin necesidad de intervención por tu parte. Sin embargo, el mecanismo de hidratación de estilos, comúnmente utilizado en el renderizado del servidor, también puede usarse para el renderizado del lado del cliente (CSR) mediante el plugin vite-plugin-effcss.

El plugin captura el CSS generado por EffCSS a través de la pipeline Vite SSR y lo inserta directamente en el HTML. Esto permite eliminar el FOUC y acelerar el primer renderizado gracias a la hidratación de estilos. Funciona tanto en modo desarrollo como en modo compilación sin dependencias adicionales (sin esbuild, sin tsx, sin cargadores adicionales).

Configuración cero: funciona sin opciones. Simplemente agrégalo a tu array de plugins.

Enfocado en CSR — para SSR/SSG, use serialize() y serializeMeta() manualmente. Consulte Renderizado del lado del servidor para obtener más detalles.

Uso del plugin

Primero, debe instalar el plugin en su proyecto:

bash

npm install vite-plugin-effcss --save-dev

EffCSS está declarado como una dependencia de pares; asegúrese de que esté instalado en su proyecto:
bash
npm install effcss

Luego agréguelo a la configuración de Vite:

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import effcss from 'vite-plugin-effcss';

export default defineConfig({
  plugins: [react(), effcss()],
});

Agregue un marcador de posición en su HTML (opcional; si no, se usará </head>):

html

<head>
  <!-- EFFCSS_INJECT -->
</head>

Eso es todo. El plugin captura todo el CSS generado por EffCSS y lo inserta directamente en tu HTML.

Ten en cuenta que el plugin no gestiona prefix, minify ni otras configuraciones de EffCSS; estas deben configurarse en tu propio código fuente mediante configure().

// src/effcss-config.ts
import { configure } from 'effcss';

configure({
  prefix: 'my',
  minify: true,
});

Opciones

El plugin admite las siguientes opciones:

Option	Type	Default	Description
`verbose`	`boolean`	`false`	Registro detallado
`entry`	`string`	—	Punto de entrada explícito (p. ej., `/src/main.tsx`). Se detecta automáticamente a partir de `<script type="module" src="...">` en `index.html` si se omite
`placeholder`	`string`	`'<!-- EFFCSS_INJECT -->'`	Marcador de posición HTML para reemplazar con `<style>`
`injectTo`	`'head' \| 'head-prepend' \| 'body'`	`'head'`	Posición de inyección alternativa si no se encuentra el marcador de posición.
`injectMeta`	`boolean`	`true`	Inyectar `serializeMeta()` como `<script>` con metadatos JSON

Cómo funciona

                    buildStart()
                          │
                 ┌─────────┴─────────┐
                 │                   │
                 ▼                   ▼
           Server exists?      Server null?
           (dev mode)          (build mode)
                 │                   │
                 ▼                   ▼
      write tmp .ts file     createServer() + virtual module
      → ssrLoadModule        → ssrLoadModule('effcss:capture')
                 │                   │
                 └───────┬───────────┘
                         ▼
               mod.css + mod.meta
                         │
                         ▼
               transformIndexHtml
               → inject <style> + <script>

El plugin crea un módulo de captura que:

Importa EffCSS (para acceder a serialize() / serializeMeta())
Importa tu punto de entrada — para ejecutar y registrar estilos
Llama a serialize() — captura el CSS final y los metadatos como cadenas
Inserta los resultados en tu HTML mediante transformIndexHtml

Modo de desarrollo — utiliza el ViteDevServer existente con un archivo .ts temporal y luego lo limpia.

Modo de compilación — crea un servidor de desarrollo Vite temporal mediante createServer(), registra un módulo virtual 'effcss:capture' con ganchos resolveId/load, lo carga mediante ssrLoadModule() y cierra el servidor. Se incluyen los plugins de usuario (React, Vue, etc.) para que las importaciones de JSX, SVG y CSS se transformen correctamente. El plugin se autoexcluye del servidor anidado para evitar la recursión infinita.

Notas técnicas

Vite: ^5.0.0 || ^6.0.0
EffCSS: ^5.4.0
Tiempo de ejecución: EffCSS permanece en el paquete del navegador

Renderizado del lado del cliente ​

Uso del plugin ​

Opciones ​

Cómo funciona ​

Notas técnicas ​

Renderizado del lado del cliente

Uso del plugin

Opciones

Cómo funciona

Notas técnicas