La forma tradicional de escribir componentes web no es muy compatible con SSR (Server Side Rendering). En esta publicación, te muestro cómo puedes construir componentes web reactivos que funcionen con SSR y con cualquier marco de JavaScript (Vue, React, Svelte, Solid, Brisa) o Vanilla JS.

• Introducción
• Escribiendo un componente web con Brisa
• Creación del componente web
• Cargando el Componente Web en un proyecto Vanilla JS
• SSR del Componente Web
• Cuéntame más sobre Brisa... Por favor...
• Nota para creadores de bibliotecas de componentes web
• Ejemplo
• Conclusión

Introducción

Vamos a utilizar Brisa Web Compiler. Brisa es un framework web que además de ser similar a otros frameworks como Next.js o Nuxt.js, también permite construir Componentes Web reactivos que funcionan con señales de reactividad, con JSX y con SSR.

Para hacer esto, solo necesitas conocer la sintaxis de Brisa al escribir Componentes Web. Brisa aún no es pública ya que actualmente se encuentra en el 95.48% del mapa de ruta v0.1, pero estimamos que en 1 mes estará lista para su lanzamiento y todos podrán acceder a ella. Sin embargo, incluso si no es público en absoluto, ya puedes usarlo para crear tus propias bibliotecas de componentes web.

Escribiendo un componente web con Brisa

A modo de ejemplo, vamos a escribir un Web Component de un contador, como siempre, el ejemplo clásico.

contador-wc.tsx

import type { WebContext } from "brisa";

export default function CounterWC(
  { start = 0, color = "#2cebcf" }: { start?: number; color?: string },
  { state, css }: WebContext,
) {
  const count = state(start);

  css`
    button {
      background-color: ${color};
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
      cursor: pointer;
    }
    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  `;

  return (
    

       count.value  }> 
      {count.value}
       count.value--}>-
    
  );
}

Brisa usa el nombre de los archivos para conocer el selector, aquí el selector sería counter-wc.

CONSEJO: Aunque Brisa aún no es pública, puedes usar tipos de TypeScript para guiarte sobre cómo escribir componentes web.

En el ejemplo anterior, el estado se usa para crear una señal y luego, usando el valor ., la haces reactiva dentro del JSX. Los props también son señales especiales, ya que al ser de solo lectura, el .value no se usa para facilitar su uso y definir los valores predeterminados más fácilmente, esto se hace mediante optimizaciones en tiempo de compilación, similar a React para actuar como si estuvieran usando señales pero al revés.

El literal de plantilla CSS le permite reaccionar a cambios reactivos en este caso de la propiedad de color. Este literal de plantilla CSS fuera de este ejemplo es muy útil para realizar animaciones reactivas fácilmente. Es importante recordar que los Componentes Web funcionan con Shadow DOM, por lo que el CSS no afecta al resto de la página.

Construyendo el componente web

Para construir el componente web, debe ejecutar el siguiente comando:

brisa build -w counter-wc.tsx

Este comando generará 2 archivos:

[ wait ]  ? building your standalone components...
[ info ]
[ info ]   Standalone components:
[ info ]   - build/counter-wc.client.js (670.00 B)
[ info ]   - build/counter-wc.server.js (842.00 B)
[ info ]
[ info ]   ✨  Done in 42.20ms.

Estos archivos no son el Componente Web, es solo la función de renderizado del Componente Web optimizado en el momento de la compilación para que sea lo más liviano posible (los bytes que salen son sin gzip).

Entonces, ¿cómo cargamos el componente web?

Cargando el componente web en un proyecto Vanilla JS

Para hacer esto, necesita agregar el mapa de importación en el HTML con brisa/client y luego importar el archivo counter-wc.client.js:

Aquí solo la parte de renderizado se portaría en cada archivo de componente web, mientras que todos usarían el mismo contenedor Brisa definido en el importmap, que es responsable de crear el componente web con las señales y el DOM sombreado.

SSR del componente web

La SSR de un componente web ahora se puede realizar gracias al Declarative Shadow DOM. El archivo counter-wc.server.js ya ha sido compilado con este comportamiento, por lo que solo necesita importarlo en su servidor, representarlo en HTML y adaptarlo al marco de su servidor.

Aquí hay un ejemplo con Bun.js o Node.js sin usar JSX:

ssr.js

import { renderToString } from "brisa/server";
import { jsx } from "brisa/jsx-runtime";
import CustomCounter from "counter-wc/server";

const html = `


    
    
    
    
    
    
    
    
        ${await renderToString(jsx(CustomCounter, { start: 10 }))}
    

`;

console.log(html);

Luego ejecute bun run ssr.js y verá el HTML con el componente web renderizado usando Declarative Shadow DOM.

Cuéntame más sobre Brisa... Por favor...

La integración de estas librerías de Web Component con Brisa se realiza a través de un archivo de configuración:

import type { WebComponentIntegrations } from "brisa";

export default {
  "custom-counter": {
    client: "./path/to/web-component.client.js",
    server: "./path/to/web-component.server.js",
    types: "./path/to/web-component.types.d.ts",
  },
} satisfies WebComponentIntegrations;

De esta manera, los tipos SSR y TypeScript se integran automáticamente en su proyecto. Y puede utilizar el Componente Web en cualquier Componente del Servidor o dentro de otro Componente Web.

Si estás interesado en saber más, te invito a suscribirte al newsletter de Brisa para recibir las últimas noticias y actualizaciones sobre Brisa. Estimamos que a finales de septiembre estará listo para su lanzamiento.

Nota para los creadores de bibliotecas de componentes web

Te animamos a que pruebes Brisa para crear tus propias bibliotecas de componentes web. Si pones la insignia "hecho con Brisa", pondremos un enlace a tu biblioteca en la página de Brisa.

Ejemplo

Si quieres ver el repositorio de GitHub del ejemplo del contador que te hemos explicado en este artículo, puedes echarle un vistazo y utilizarlo como referencia para tus propias creaciones:

• https://github.com/aralroca/counter-wc

Conclusión

En esta publicación, hemos visto cómo construir componentes web reactivos que funcionan con SSR y con cualquier marco de JavaScript o Vanilla JS. Hemos utilizado Brisa para construir el Componente Web y hemos visto cómo cargarlo en un proyecto Vanilla JS y cómo hacer SSR con él.

Espero que hayas disfrutado de esta publicación y que hayas aprendido algo nuevo. Si tienes alguna pregunta, no dudes en preguntarme en los comentarios a continuación. Estaré encantada de ayudarte.

¡Feliz programación y disfruta el resto del verano! ??