React på Cloudflare Workers med Hono

Hono är ett lättviktigt och extremt snabbt webbramverk utformat för att köras i edge-runtime-miljöer, bland annat Cloudflare Workers, Deno Deploy, Bun och Node.js. API:t är inspirerat av Express men byggt från grunden för webbstandarderna (Fetch API, Request/Response), vilket gör det väl lämpat för edge-miljöer.

Det är enkelt att skapa ett nytt Hono-projekt för Cloudflare Workers: npm create hono@latest ber dig välja en mall, välja "cloudflare-workers" och skapar ett projekt som redan är konfigurerat med wrangler (Cloudflares CLI) och Hono-beroendet.

Om du vill serverrendera React i en Hono Worker installerar du react, react-dom och @types/react och importerar sedan renderToReadableStream från react-dom/server. Funktionen ingår i React 18:s streaming-API och är utformad för miljöer som stöder Web Streams API — vilket Cloudflare Workers gör.

En typisk SSR-rout-hanterare anropar renderToReadableStream med din rotkomponent i React, väntar på strömmen och använder sedan c.body(stream, { headers: { 'Content-Type': 'text/html' } }) eller c.html(htmlString) för att skicka svaret. Strömmen producerar HTML-delar som webbläsaren kan rendera stegvis.

renderToReadableStream returnerar ett Promise som löses till en ReadableStream med HTML-delar. Denna ReadableStream följer Web Streams API och kan skickas direkt som body i ett Response-objekt, vilket gör den idealisk för Cloudflare Workers fetch-hanterare.

React-strömmen producerar HTML för komponentträdet, men inte det omgivande dokumentet. Du måste bädda in strömmen i ett HTML-skal: en sträng som innehåller doctype, head med metataggar och CSS-länken, en öppnande body-tagg — därefter React-strömmen — och sedan avslutande body- och html-taggar.

Ett Vite-byggt React-klientpaket måste levereras tillsammans med Workern. Cloudflare Pages eller Workers Assets-funktionen hanterar detta: c.env.ASSETS.fetch(request) dirigerar begäranden efter resurser (JS, CSS, bilder) till de statiska filer som laddats upp med din Worker-distribution.

Worker-filen exporterar ett standardobjekt med en fetch-hanterare: export default { fetch: app.fetch }. Hono-metoden app.fetch är redan en kompatibel fetch-hanterare som tar emot en Request och returnerar en Response, så den kan anslutas direkt till Workers runtime.

wrangler dev startar en lokal utvecklingsserver som emulerar Cloudflare Workers runtime på din dator. Den bevakar filändringar och laddar om automatiskt, vilket ger ett snabbt lokalt utvecklingsflöde innan du distribuerar till produktion.

wrangler deploy paketerar och laddar upp din Worker-kod till Cloudflares nätverk, så att den blir tillgänglig på alla 300+ edge-platser inom några sekunder. Konfigurationsfilen wrangler.toml anger ditt konto-ID, Worker-namn samt eventuella bindningar till KV-namnutrymmen eller D1-databaser.

För interaktivitet på klientsidan skickar du bootstrapScripts: ['/assets/client.js'] till renderToReadableStream. React infogar en script-tagg i HTML-koden som laddar klientpaketet och anropar hydrateRoot på det serverrenderade DOM-trädet, så att sidan blir interaktiv när JavaScript-koden har laddats.

Hono tillhandahåller ett lättviktigt, edge-anpassat HTTP-ramverk som integreras smidigt med Reacts renderToReadableStream. Worker-ingångspunkten exporterar app.fetch direkt till Workers runtime, statiska resurser levereras via ASSETS-bindningar och wrangler hanterar både lokal utveckling och produktionsdistribution. bootstrapScripts kopplar den strömmade HTML-koden till hydreringen på klientsidan.