Hono ile Cloudflare Workers'ta React

Hono, Cloudflare Workers, Deno Deploy, Bun ve Node.js dahil uç çalışma zamanlarında çalışmak üzere tasarlanmış, hafif ve son derece hızlı bir web çerçevesidir. API'si Express'ten esinlenmiştir; ancak Web Standartları (Fetch API, Request/Response) temel alınarak sıfırdan oluşturulmuştur. Bu da onu uç ortamları için doğal bir seçenek haline getirir.

Cloudflare Workers için yeni bir Hono projesi oluşturmak kolaydır: npm create hono@latest komutu bir şablon seçmenizi ister, "cloudflare-workers" seçeneğini belirlemenizi sağlar ve wrangler (Cloudflare'ın CLI'sı) ile Hono bağımlılığı önceden yapılandırılmış bir proje oluşturur.

React'i bir Hono Worker'ı içinde sunucu tarafında oluşturmak için react, react-dom ve @types/react paketlerini yükleyin, ardından react-dom/server içinden renderToReadableStream'i içe aktarın. Bu işlev React 18'in akış API'sinin bir parçasıdır ve Web Streams API'sini destekleyen ortamlar için tasarlanmıştır; Cloudflare Workers da bunu destekler.

Tipik bir SSR rota işleyicisi, renderToReadableStream'i kök React bileşeninizle çağırır, akışın tamamlanmasını bekler ve ardından yanıtı göndermek için c.body(stream, { headers: { 'Content-Type': 'text/html' } }) veya c.html(htmlString) kullanır. Akış, tarayıcının aşamalı olarak oluşturabileceği HTML parçaları üretir.

renderToReadableStream, HTML parçalarından oluşan bir ReadableStream'e çözümlenen bir Promise döndürür. Bu ReadableStream, Web Streams API'sine uyar ve bir Response nesnesinin gövdesi olarak doğrudan geçirilebilir; bu da onu Cloudflare Workers fetch işleyicisi için ideal hale getirir.

React akışı bileşen ağacının HTML'sini üretir, ancak çevreleyen belgeyi üretmez. Akışı bir HTML kabuğuna eklemelisiniz: belge türü bildirimini, meta etiketlerini ve CSS bağlantısını içeren head, açılış body etiketi — ardından React akışı — sonra kapanış body ve html etiketleri.

Vite ile oluşturulmuş bir React istemci paketi Worker ile birlikte sunulmalıdır. Cloudflare Pages veya Workers Assets özelliği bunu ele alır: c.env.ASSETS.fetch(request), varlık isteklerini (JS, CSS, görseller) Worker dağıtımınızla yüklenen statik dosyalara yönlendirir.

Worker giriş dosyası, bir fetch işleyicisine sahip varsayılan bir nesne dışa aktarır: export default { fetch: app.fetch }. Hono'nun app.fetch yöntemi, bir Request alan ve bir Response döndüren uyumlu bir fetch işleyicisidir; bu nedenle doğrudan Workers çalışma zamanına bağlanır.

wrangler dev, makinenizde Cloudflare Workers çalışma zamanını taklit eden yerel bir geliştirme sunucusu başlatır. Dosya değişikliklerini izler ve otomatik olarak yeniden yükler; böylece üretime dağıtımdan önce hızlı bir yerel geliştirme döngüsü sağlar.

wrangler deploy, Worker kodunuzu paketleyip Cloudflare ağına yükleyerek kodu 300'den fazla uç konumun tamamında saniyeler içinde kullanıma açar. wrangler.toml yapılandırma dosyası hesap ID'nizi, Worker adını ve tüm KV ad alanı veya D1 veritabanı bağlantılarını belirtir.

İstemci tarafı etkileşimi için renderToReadableStream'e bootstrapScripts: ['/assets/client.js'] geçirin. React, istemci paketini yükleyen ve JS yüklendikten sonra sunucu tarafından oluşturulmuş DOM üzerinde hydrateRoot'u çağıran bir betik etiketi HTML'ye ekler; böylece sayfa etkileşimli hale gelir.

renderToReadableStream ne döndürür?

Hono, React'in renderToReadableStream işleviyle sorunsuz biçimde bütünleşen hafif ve uç odaklı bir HTTP çerçevesi sunar. Worker giriş noktası app.fetch'i doğrudan Workers çalışma zamanına dışa aktarır, statik varlıklar ASSETS bağlantıları üzerinden sunulur ve wrangler hem yerel geliştirmeyi hem de üretime dağıtımı yönetir. bootstrapScripts, akışla gönderilen HTML'yi istemci tarafı hidratasyon paketiyle bağlar.