No tan estático... Presentamos la versión Beta de LA API HTMLRewriter a Cloudflare Workers

Hoy nos complace anunciar la versión beta de HTMLRewriter, un analizador HTML de transmisión con una API JavaScript basada en selector fácil de usar para la manipulación DOM, disponible en el tiempo de ejecución de Cloudflare Workers.

Para aquellos de ustedes que no están familiarizados, Cloudflare Workers es una plataforma ligera sin servidor que permite a los desarrolladores aprovechar la red de Cloudflare para aumentar las aplicaciones existentes o crear otras completamente nuevas sin configurar ni mantener la infraestructura.

Sitios estáticos para aplicaciones dinámicas

El viernes anunciamos Workers Sites: un flujo de trabajo de implementación de sitios estáticos integrado en la herramienta Wrangler CLI. Ahora, junto con la API HTML Rewriter, puede realizar transformaciones DOM encima de su HTML estático, justo en el acceso de Cloudflare.

Anteriormente, podría hacer esto ingresando todo el cuerpo de la respuesta en el Worker, sin embargo, ese método era propenso a presentar algunos problemas.  En primer lugar, el análisis de un archivo grande estaba enlazado a los límites de memoria o CPU. Además, afectaría tu TTFB ya que el cuerpo no podría transmitirse, y el navegador no podría realizar ningún análisis especulativo para cargar activos posteriores.

HTMLRewriter fue la pieza que faltaba para tener tu aplicación completamente en vivo, de principio a fin. Puedes crear tu API en Cloudflare Workers como una función sin servidor, tener los elementos estáticos de tu frontend alojados en Workers Sites y vincularlos dinámicamente mediante la API HTMLRewriter.

Conociendo a JAMStack

Podrías estar pensando "¡espera!", JavaScript, API sin servidor... esto está empezando a sonar un poco familiar. También nos sonaba familiar a nosotros.

En primer lugar, vamos a responder a la pregunta, ¿qué es JAMStack? JAMStack es un término acuñado por Mathias Biilmann, que significa JavaScript, API y marcado. Las aplicaciones JAMStack están diseñadas para ser muy fáciles de escalar, ya que se basan en la implementación simplificada de sitios estáticos. También están destinados a simplificar el flujo de trabajo de desarrollo web, especialmente para los desarrolladores frontend, al llevar la manipulación de datos y la representación que tradicionalmente ocurría en el back-end al front-end e interactuar con el back-end solo a través de llamadas API.

Así que hasta ese punto, sí, esto es JAMStack. Sin embargo, HTMLRewriter lleva esta idea un paso más allá.

El acceso: No es cliente del todo, no es un servidor del todo

La mayoría de las aplicaciones JAMStack se basan en llamadas del lado del cliente a API de terceros, donde la representación se puede manejar del lado del cliente usando JavaScript, lo que permite a los desarrolladores front-end trabajar con cadenas de herramientas e idiomas con los que ya están familiarizados.  Sin embargo, esto significa que con cada carga de página, el cliente debe ir al origen, esperar HTML y JS, y, luego, después de ser analizado y cargado, realizar múltiples llamadas a las API.  Además, todo esto sucede en dispositivos del lado del cliente que son inevitablemente máquinas menos potentes que los servidores y tienen conexiones de última milla potencialmente inestables.

Con HTMLRewriter en Workers, puedes realizar esas llamadas API desde el acceso, donde las fallas son significativamente menos probables que en las conexiones de dispositivos del cliente, y los resultados a menudo se pueden almacenar en caché.  Mejor aún, puedes escribir las propias API en Workers y puedes incorporar los resultados directamente en el HTML, todo en la misma máquina de acceso potente. El uso de estas máquinas para realizar "renderizado del lado del acceso" con HTMLRewriter siempre ocurre lo más cerca posible de tus usuarios finales, sin que ocurra en el dispositivo mismo, y elimina la latencia de viajar hasta el origen.

¿Cómo luce la API HTMLRewriter?

La clase HTMLRewriter es una experiencia similar a jQuery directamente dentro de su aplicación Workers, que permite a los desarrolladores crear aplicaciones profundamente funcionales, apoyándose en una potente API JavaScript para analizar y transformar HTML.

A continuación se muestra un ejemplo de cómo puedes utilizar HTMLRewriter para reescribir vínculos en una página web de HTTP a HTTPS.

const REWRITER = new HTMLRewriter()
    .on('a.avatar', { element:  e => rewriteUrl(e, 'href') })
    .on('img', { element: e => rewriteUrl(e, 'src') });

async function handleRequest(req) {
  const res = await fetch(req);
  return REWRITER.transform(res);
}

En el ejemplo anterior, creamos una nueva instancia de HTMLRewriter y usamos el selector para encontrar todas las instancias de los elementos a e img, y llamamos a la función rewriteURL en las propiedades href y src respectivamente.

Tutorial de internacionalización y localización: Si deseas llevar las cosas más allá, tenemos un tutorial completo sobre cómo hacer que tu aplicación i18n sea amigable con HTMLRewriter.

Cómo empezar

Si ya estás utilizando Cloudflare Workers, simplemente puedes comenzar con HTMLRewriter consultando nuestra documentación (¡no es necesario registrarse ni hacer nada más!).  Si eres nuevo en Cloudflare Workers, te recomendamos que comiences registrándote aquí.

Si estás interesado en los detalles esenciales y detallados de cómo funciona HTMLRewriter, y quieres aprender más de lo que siempre quisiste saber sobre el análisis del DOM, mantente atento.  Estamos encantados de compartir los detalles contigo en una publicación futura.

Una última cosa, no estás limitado a los sitios de Workers solamente. Dado que Cloudflare Workers se puede implementar como proxy frente a cualquier aplicación, puedes usar HTMLRewriter como una forma elegante de aumentar tu sitio existente y agregar fácilmente elementos dinámicos, independientemente del backend.

¡Nos encanta saber de ti!

¡Siempre estamos iterando y trabajando para mejorar nuestro producto en función de los comentarios de los clientes!  Por favor, ayúdanos completando nuestra encuesta sobre tu experiencia.

¿Ha creado algo interesante con Workers? ¡Cuéntanos, @CloudflareDev !