Nicht so statisch... Einführung der HTMLRewriter-API Beta für Cloudflare Workers

Wir freuen uns, HTMLRewriter Beta ankündigen zu können – einen Streaming-HTML-Parser mit einer einfach anzuwendenden, Auswahl-basierten JavaScript-API für DOM-Manipulationen, verfügbar in der Cloudflare-Workers-Runtime.

Für diejenigen unter Ihnen, die Cloudflare Workers nicht kennen: Es handelt sich um eine einfache, serverlose Plattform, die es Entwicklern ermöglicht, Cloudflares Netzwerk zu nutzen, um vorhandene Anwendungen zu erweitern oder völlig neue Anwendungen zu erstellen, ohne dass die Infrastruktur konfiguriert oder verwaltet werden muss.

Von statischen Sites zu dynamischen Anwendungen

Am vergangenen Freitag haben wir Workers Sites vorgestellt: ein Workflow zur Bereitstellung statischer Websites, der in das Wrangler-CLI-Tool integriert ist. Jetzt können Sie in Verbindung mit der HTML-Rewriter-API über Ihrem statischen HTML-Code DOM-Transformationen direkt in der Cloudflare-Edge ausführen.

Sie konnten das auch früher schon tun, indem Sie den gesamten Antworttext in Worker erfassten, jedoch war diese Methode problemanfällig. Erstens stieß das Parsen einer großen Datei früher oder später auf Speicher- oder CPU-Beschränkungen. Darüber hinaus wurde Ihr TTFB davon betroffen, da der Text nicht mehr gestreamt werden konnte, und der Browser wurde daran gehindert, spekulatives Parsen auszuführen, um nachfolgende Ressourcen zu laden.

HTMLRewriter war das fehlende Teil, um Ihre Anwendung vollständig in der Edge auszuführen – von Anfang bis Ende. Sie können Ihre API auf Cloudflare Workers als serverlose Funktion erstellen, die statischen Elemente Ihres Front-Ends auf Workers Sites hosten lassen und sie mithilfe der HTMLRewriter-API dynamisch miteinander verbinden.

Da kommt JAMStack ins Spiel

Vielleicht denken Sie jetzt: „Moment mal – JavaScript, serverlose APIs ... das hört sich alles ein bisschen bekannt an.“ Uns kam es auch bekannt vor.

Lassen Sie uns zunächst die Frage beantworten: Was ist JAMStack? JAMStack ist ein Begriff, der von Mathias Biilmann geprägt wurde und für JavaScript, APIs und Markup steht. JAMStack-Anwendungen sind für sehr einfache Skalierbarkeit vorgesehen, da sie auf vereinfachter statischer Website-Bereitstellung basieren. Sie sind auch dafür vorgesehen, den Webentwicklungs-Workflow insbesondere für Front-End-Entwickler zu vereinfachen, indem Datenmanipulation und Rendering, die traditionell auf dem Back-End stattgefunden haben, zum Front-End gebracht werden und die Interaktion mit dem Back-End nur über API-Aufrufe erfolgt.

Insofern, ja, das ist JAMStack. HTMLRewriter geht jedoch noch einen Schritt weiter.

Die Edge: Nicht ganz Client, nicht ganz Server

Die meisten JAMStack-Anwendungen basieren auf clientseitigen Aufrufen an Drittanbieter-APIs, bei denen das Rendering clientseitig mit JavaScript gehandhabt werden kann, sodass Front-End-Entwickler mit Toolketten und Sprachen arbeiten können, mit denen sie bereits vertraut sind. Das bedeutet jedoch, dass der Client bei jedem Seitenladevorgang zum Ursprung gehen, auf HTML und JS warten und dann – nachdem geparst und geladen wurde – mehrere Aufrufe an APIs vornehmen muss. Darüber hinaus geschieht all dies auf clientseitigen Geräten, die unweigerlich weniger leistungsfähig sind als Server und potenziell unzuverlässige Last-Mile-Verbindungen aufweisen.

Mit HTMLRewriter in Workers können Sie diese API-Aufrufe von der Edge aus vornehmen, wo Fehler viel weniger wahrscheinlich sind als bei Verbindungen mit Clientgeräten, und die Ergebnisse können häufig zwischengespeichert werden. Besser noch, Sie können die APIs selbst in Workers schreiben und die Ergebnisse direkt in den HTML-Code integrieren – alles auf derselben leistungsstarken Edge-Maschine. Der Einsatz dieser Maschinen zum „Edge-Side-Rendering“ mit HTMLRewriter geschieht immer so nahe wie möglich an Ihren Endbenutzern, ohne auf dessen Gerät selbst stattzufinden. Dabei wird die Latenz für den langen Weg bis zum Ursprung eliminiert.

Wie sieht die HTMLRewriter-API aus?

Die HTMLRewriter-Klasse ist eine jQuery-ähnliche Funktion direkt in Ihrer Workers-Anwendung, die es Entwicklern ermöglicht, zutiefst funktionelle Anwendungen zu erstellen, die auf einer leistungsstarken JavaScript-API basieren, um HTML zu parsen und zu transformieren.

Im Folgenden finden Sie ein Beispiel dafür, wie Sie HTMLRewriter einsetzen können, um Links auf einer Webseite von HTTP in HTTPS umzuschreiben.

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);
}

Im obigen Beispiel erstellen wir eine neue Instanz von HTMLRewriter, verwenden den Selektor, um alle Instanzen von a- und img-Elementen zu finden, und rufen die rewriteURL-Funktion für die href- bzw. src-Eigenschaften auf.

Internationalisierungs- und Lokalisierungs-Tutorial: Wenn Sie noch einen Schritt weitergehen möchten, haben wir ein vollständiges Tutorial dazu, wie Sie Ihre Anwendung mit HTMLRewriter an i18n anpassen können.

Erste Schritte

Wenn Sie Cloudflare Workers bereits verwenden, können Sie einfach unsere Dokumentation konsultieren, um mit HTMLRewriter zu beginnen (keine Anmeldung oder sonst etwas erforderlich!). Wenn Sie neu bei Cloudflare Workers sind, empfehlen wir Ihnen, sich zuerst hier anzumelden.

Wenn Sie sich für die grundlegenden Details der Funktionsweise von HTMLRewriter interessieren und bereit sind, mehr zu lernen, als Sie jemals über DOM-Parsen wissen wollten, haben Sie etwas Geduld. Wir werden Ihnen alle Details in einem zukünftigen Beitrag mitteilen.

Noch ein letzter Punkt – Sie sind nicht ausschließlich auf Workers-Sites beschränkt. Da Cloudflare Workers vor jeder Anwendung als Proxy bereitgestellt werden kann, können Sie HTMLRewriter als elegante Möglichkeit einsetzen, um Ihre vorhandene Website zu erweitern und dynamische Elemente unabhängig vom Back-End hinzuzufügen.

Wir freuen uns, von Ihnen zu hören!

Wir arbeiten ständig daran, unsere Produkte auf der Grundlage von Kundenfeedback zu verbessern! Bitte helfen Sie uns und nehmen Sie an unserer Umfrage über Ihre Erfahrungen teil.

Haben Sie mit etwas Interessantes mit Workers entwickelt? Erzählen Sie es uns @CloudflareDev!