React pada Cloudflare Workers dengan Hono

Hono ialah rangka kerja web yang ringan dan amat pantas, direka untuk berjalan pada persekitaran masa jalan pinggir termasuk Cloudflare Workers, Deno Deploy, Bun dan Node.js. Antara mukanya diinspirasikan oleh Express tetapi dibina dari awal berdasarkan Piawaian Web (antara muka Fetch, Request/Response), menjadikannya sangat sesuai untuk persekitaran pinggir.

Membina rangka asas projek Hono baharu untuk Cloudflare Workers adalah mudah: npm create hono@latest meminta Anda memilih templat, memilih "cloudflare-workers", kemudian mencipta projek yang telah dikonfigurasikan dengan wrangler (CLI Cloudflare) dan kebergantungan Hono.

Untuk memaparkan React pada pelayan di dalam Hono Worker, pasang react, react-dom dan @types/react, kemudian import renderToReadableStream daripada react-dom/server. Fungsi ini sebahagian daripada antara muka penstriman React 18 dan direka untuk persekitaran yang menyokong antara muka Strim Web — dan Cloudflare Workers menyokongnya.

Pengendali laluan SSR biasa memanggil renderToReadableStream dengan komponen React akar Anda, menunggu strim itu, kemudian menggunakan c.body(stream, { headers: { 'Content-Type': 'text/html' } }) atau c.html(htmlString) untuk menghantar tindak balas. Strim tersebut menghasilkan bahagian HTML yang boleh dipaparkan oleh pelayar secara berperingkat.

renderToReadableStream memulangkan Promise yang diselesaikan kepada ReadableStream yang mengandungi bahagian HTML. ReadableStream ini mematuhi antara muka Strim Web dan boleh dihantar terus sebagai isi objek Response, menjadikannya sangat sesuai untuk pengendali ambil Cloudflare Workers.

Strim React menghasilkan HTML pepohon komponen tetapi bukan dokumen di sekelilingnya. Anda mesti memasukkan strim itu ke dalam shell HTML: rentetan yang mengandungi deklarasi jenis dokumen, head dengan tag meta dan pautan CSS, serta tag body pembuka — kemudian strim React — diikuti tag body dan html penutup.

Himpunan klien React yang dibina dengan Vite perlu disampaikan bersama Worker. Cloudflare Pages atau ciri Assets Workers mengendalikan perkara ini: c.env.ASSETS.fetch(request) menghalakan permintaan aset (JS, CSS, imej) kepada fail statik yang dimuat naik bersama penerapan Worker Anda.

Fail entri Worker mengeksport objek lalai dengan pengendali ambil: export default { fetch: app.fetch }. Kaedah app.fetch Hono sudah pun merupakan pengendali ambil yang serasi, yang menerima Request dan memulangkan Response, jadi kaedah ini boleh disambungkan terus kepada persekitaran masa jalan Workers.

wrangler dev memulakan pelayan pembangunan setempat yang meniru persekitaran masa jalan Cloudflare Workers pada komputer Anda. Ia memantau perubahan fail dan memuat semula secara automatik, lalu menyediakan gelung pembangunan setempat yang pantas sebelum penerapan ke produksi.

wrangler deploy menggabungkan dan memuat naik kod Worker Anda ke rangkaian Cloudflare, menjadikannya aktif di semua lebih 300 lokasi pinggir dalam masa beberapa saat. Fail konfigurasi wrangler.toml menentukan ID akaun, nama Worker serta sebarang pengikatan ruang nama KV atau pangkalan data D1.

Untuk interaktiviti sisi klien, hantarkan bootstrapScripts: ['/assets/client.js'] kepada renderToReadableStream. React akan memasukkan tag skrip ke dalam HTML yang memuatkan himpunan klien dan memanggil hydrateRoot pada DOM yang dipaparkan pada pelayan, lalu menjadikan halaman interaktif selepas JS dimuatkan.

Hono menyediakan rangka kerja HTTP yang ringan dan direka khusus untuk pinggir, serta berintegrasi dengan kemas dengan renderToReadableStream React. Entri Worker mengeksport app.fetch terus kepada persekitaran masa jalan Workers, aset statik disampaikan melalui pengikatan ASSETS, dan wrangler mengendalikan pembangunan setempat serta penerapan produksi. bootstrapScripts menghubungkan HTML distrimkan kepada himpunan hidrasi sisi klien.