MallaDocs
InicioInicio rápidoAbrir Malla

Renderizado y runtime

Un solo renderizador para el lienzo y el sitio, publicación por snapshot, islas y el runtime del cliente.

Guía para desarrolladores

@malla/renderer es una función pura que convierte documentos en HTML y CSS. Corre en los frames del lienzo, en el Worker sites y en los tests, y por eso el editor coincide con producción.

ts
renderPage({ doc, components, classes, tokens, site, data, user? })
  → { html, css, runtime: RuntimeManifest }

Publicación de snapshots

Publicar: O(1) respecto al tamaño del sitio
apiPOST /sites/:id/publish comprueba el rol y el plan.
Snapshotsnapshot.json + el CSS compartido compilado a R2.
Flujos de trabajoLos flujos de trabajo de servidor a KV, por entorno.
CambioPuntero de host en KV → nuevo publishId.

Una publicación escribe un snapshot inmutable (documentos de páginas y componentes, clases, tokens, SEO, manifiesto) y cambia un solo puntero, así que publicar es instantáneo y atómico, y revertir es otro cambio de puntero. El popover de publicación y POST /sites/:siteId/rollback lo devuelven a una de las 50 publicaciones más recientes del entorno (consulta Revertir); los ítems del CMS, los recursos y otros datos en vivo no se revierten. Las páginas críticas se prerenderizan para que nunca estén en frío.

Renderizado bajo demanda

Una solicitud a un sitio publicado
Búsqueda del hostKV: host → sitio, entorno, publishId.
AccesoLa regla de la página se comprueba en cada solicitud.
CachéAcierto: Cache API o write-back desde R2.
RenderizadoFallo: renderPage a partir del snapshot.
  • Las páginas estáticas se renderizan una vez por publicación y se guardan en caché para siempre con claves que incluyen el publishId.
  • Las páginas de servidor ejecutan consultas de servidor y se renderizan en cada solicitud en el edge, con un TTL corto.
  • Los cambios del CMS incrementan una revisión por colección; solo vuelven a renderizarse las páginas que dependen de ella.
  • /api/* y /_auth/* van al runner; /api/_q/* (consultas de cliente) y /api/_forms/* se quedan en sites.

Runtime de islas

La estructura publicada es HTML estático. Solo cambian los textos, atributos y estilos enlazados y las listas repetidas, así que @malla/runtime es @vue/reactivity + el intérprete de expresiones compartido + un parcheador de DOM mínimo: sin DOM virtual, sin hidratación completa, menos de 25 KB con gzip. Solo se carga en páginas con enlaces de datos, formularios o flujos de trabajo de cliente; GSAP es un chunk aparte que solo se carga para las interacciones.

  • El renderizador emite un manifiesto de islas con lo que hay que hidratar.
  • Las páginas renderizadas por solicitud incluyen al visitante en el manifiesto; las páginas en caché piden /_auth/me una sola vez al arrancar, y solo si algo lee user.
  • La navegación entre páginas usa prefetch con Speculation Rules y View Transitions para que se sienta como una app.

En el lienzo

Cada mesa de trabajo es un iframe en sandbox en un origen aparte, que habla con el editor mediante un protocolo postMessage tipado: init, patch con ops, measure, hit-test. Los parches solo tocan el nodo que cambió y su regla CSS.