React di Cloudflare Workers dengan Hono

Hono adalah kerangka kerja web yang ringan dan sangat cepat, dirancang untuk berjalan pada runtime tepi termasuk Cloudflare Workers, Deno Deploy, Bun, dan Node.js. API-nya terinspirasi oleh Express, tetapi dibangun dari awal untuk Standar Web (Fetch API, Request/Response), sehingga cocok secara alami untuk lingkungan tepi.

Membuat kerangka proyek Hono baru untuk Cloudflare Workers sangat mudah: npm create hono@latest meminta Anda memilih templat, memilih "cloudflare-workers", lalu membuat proyek yang telah dikonfigurasi sebelumnya dengan wrangler (CLI milik Cloudflare) dan dependensi Hono.

Untuk merender React di dalam Worker Hono, instal react, react-dom, dan @types/react, lalu impor renderToReadableStream dari react-dom/server. Fungsi ini merupakan bagian dari API aliran React 18 dan dirancang untuk lingkungan yang mendukung API Aliran Web — dan Cloudflare Workers mendukungnya.

Penangan rute SSR biasanya memanggil renderToReadableStream dengan komponen React akar Anda, menunggu alirannya, lalu menggunakan c.body(stream, { headers: { 'Content-Type': 'text/html' } }) atau c.html(htmlString) untuk mengirim respons. Aliran tersebut menghasilkan potongan HTML yang dapat dirender browser secara bertahap.

renderToReadableStream mengembalikan Promise yang diselesaikan menjadi ReadableStream berisi potongan HTML. ReadableStream ini sesuai dengan API Aliran Web dan dapat langsung diteruskan sebagai isi objek Response, sehingga sangat cocok untuk penangan fetch Cloudflare Workers.

Aliran React menghasilkan HTML pohon komponen, tetapi tidak menghasilkan dokumen di sekelilingnya. Anda harus menyisipkan aliran tersebut ke dalam kerangka HTML: sebuah string yang berisi deklarasi tipe dokumen, bagian kepala dengan tag meta dan tautan CSS, tag body pembuka — lalu aliran React — kemudian tag body dan html penutup.

Bundel klien React yang dibangun dengan Vite perlu disajikan bersama Worker. Cloudflare Pages atau fitur ASSETS pada Workers menanganinya: c.env.ASSETS.fetch(request) merutekan permintaan aset (JS, CSS, gambar) ke berkas statis yang diunggah bersama penerapan Worker.

Berkas entri Worker mengekspor objek default dengan penangan fetch: export default { fetch: app.fetch }. Metode app.fetch milik Hono sudah merupakan penangan fetch yang kompatibel, yang menerima Request dan mengembalikan Response, sehingga dapat langsung digunakan oleh runtime Workers.

wrangler dev memulai server pengembangan lokal yang meniru runtime Cloudflare Workers di komputer Anda. Perintah ini memantau perubahan berkas dan memuat ulang secara otomatis, sehingga menyediakan siklus pengembangan lokal yang cepat sebelum penerapan ke produksi.

wrangler deploy memaketkan dan mengunggah kode Worker Anda ke jaringan Cloudflare, sehingga kode tersebut aktif di lebih dari 300 lokasi tepi dalam hitungan detik. Berkas konfigurasi wrangler.toml menentukan ID akun, nama Worker, serta pengikatan ruang nama KV atau basis data D1.

Untuk interaktivitas sisi klien, teruskan bootstrapScripts: ['/assets/client.js'] ke renderToReadableStream. React akan menyisipkan tag skrip ke dalam HTML yang memuat bundel klien dan memanggil hydrateRoot pada DOM yang dirender di server, sehingga halaman menjadi interaktif setelah JS dimuat.

Apa yang dikembalikan renderToReadableStream?

Hono menyediakan kerangka kerja HTTP ringan yang dirancang khusus untuk tepi dan terintegrasi dengan baik dengan renderToReadableStream milik React. Entri Worker mengekspor app.fetch langsung ke runtime Workers, aset statis disajikan melalui pengikatan ASSETS, dan wrangler menangani pengembangan lokal maupun penerapan produksi. bootstrapScripts menghubungkan HTML yang dialirkan dengan bundel hidrasi sisi klien.