React op Cloudflare Workers met Hono

Hono is een lichtgewicht, razendsnel webframework dat is ontworpen voor edge-runtimes zoals Cloudflare Workers, Deno Deploy, Bun en Node.js. De API is geïnspireerd op Express, maar vanaf de basis gebouwd voor webstandaarden (Fetch API, Request/Response), waardoor Hono goed past in edge-omgevingen.

Een nieuw Hono-project voor Cloudflare Workers opzetten is eenvoudig: npm create hono@latest vraagt je een sjabloon te kiezen, "cloudflare-workers" te selecteren en maakt een project dat vooraf is geconfigureerd met wrangler (de CLI van Cloudflare) en de Hono-afhankelijkheid.

Om React binnen een Hono Worker server-side te renderen, installeer je react, react-dom en @types/react en importeer je renderToReadableStream uit react-dom/server. Deze functie maakt deel uit van de streaming-API van React 18 en is ontworpen voor omgevingen die de Web Streams API ondersteunen — en dat doen Cloudflare Workers.

Een typische SSR-routehandler roept renderToReadableStream aan met je root-React-component, wacht op de stream en gebruikt vervolgens c.body(stream, { headers: { 'Content-Type': 'text/html' } }) of c.html(htmlString) om het antwoord te verzenden. De stream produceert HTML-fragmenten die de browser geleidelijk kan weergeven.

renderToReadableStream geeft een Promise terug die wordt opgelost met een ReadableStream van HTML-fragmenten. Deze ReadableStream voldoet aan de Web Streams API en kan rechtstreeks worden doorgegeven als de hoofdtekst van een Response-object, waardoor de functie perfect past bij de fetch-handler van Cloudflare Workers.

De React-stream produceert de HTML van de componentenboom, maar niet het omringende document. Je moet de stream invoegen in een HTML-omhulsel: een tekenreeks met de doctype, de head met metatags en de CSS-link, de openende body-tag — daarna de React-stream — en vervolgens de sluitende body- en html-tags.

Een door Vite gebouwde React-clientbundel moet naast de Worker worden aangeboden. Cloudflare Pages of de functie Workers Assets handelt dit af: c.env.ASSETS.fetch(request) routeert aanvragen voor assets (JS, CSS en afbeeldingen) naar de statische bestanden die met je Worker-implementatie zijn geüpload.

Het ingangsbestand van de Worker exporteert een standaardobject met een fetch-handler: export default { fetch: app.fetch }. De methode app.fetch van Hono is al een compatibele fetch-handler die een Request ontvangt en een Response teruggeeft, zodat die rechtstreeks op de runtime van Workers kan worden aangesloten.

wrangler dev start een lokale ontwikkelserver die de runtime van Cloudflare Workers op je computer nabootst. De server houdt wijzigingen in bestanden bij en laadt automatisch opnieuw, zodat je snel lokaal kunt ontwikkelen voordat je naar productie uitrolt.

wrangler deploy bundelt je Worker-code en uploadt die naar het netwerk van Cloudflare, zodat de code binnen enkele seconden actief is op meer dan 300 edge-locaties. Het configuratiebestand wrangler.toml specificeert je account-ID, de naam van de Worker en eventuele bindingen voor een KV-naamruimte of D1-database.

Geef voor interactiviteit aan de clientzijde bootstrapScripts: ['/assets/client.js'] door aan renderToReadableStream. React voegt een script-tag toe aan de HTML die de clientbundel laadt en hydrateRoot aanroept op de server-gerenderde DOM, zodat de pagina interactief wordt nadat JavaScript is geladen.

Hono biedt een lichtgewicht HTTP-framework voor edge-omgevingen dat goed samenwerkt met Reacts renderToReadableStream. Het ingangspunt van de Worker exporteert app.fetch rechtstreeks naar de runtime van Workers, statische assets worden aangeboden via ASSETS-bindingen en wrangler verzorgt zowel lokale ontwikkeling als uitrol naar productie. bootstrapScripts verbindt de gestreamde HTML met de hydrationbundel aan de clientzijde.