รีแอ็กต์บน Cloudflare Workers ด้วย Hono

Hono คือเฟรมเวิร์กเว็บขนาดเล็กและเร็วมากที่ออกแบบมาให้ทำงานบนรันไทม์ที่ขอบเครือข่าย รวมถึง Cloudflare Workers, Deno Deploy, Bun และ Node.js ส่วนติดต่อของ Hono ได้แรงบันดาลใจจาก Express แต่สร้างขึ้นใหม่ตั้งแต่ต้นสำหรับมาตรฐานเว็บ (ส่วนติดต่อ Fetch, Request/Response) จึงเหมาะอย่างยิ่งกับสภาพแวดล้อมที่ขอบเครือข่าย

การเตรียมโครงร่างโครงการ Hono ใหม่สำหรับ Cloudflare Workers ทำได้ง่าย: npm create hono@latest จะแจ้งให้คุณเลือกแม่แบบ เลือก "cloudflare-workers" และสร้างโครงการที่กำหนดค่า wrangler (CLI ของ Cloudflare) และการพึ่งพา Hono ไว้ล่วงหน้า

หากต้องการเรนเดอร์ React ฝั่งเซิร์ฟเวอร์ภายใน Hono Worker ให้ติดตั้ง react, react-dom และ @types/react จากนั้นนำเข้า renderToReadableStream จาก react-dom/server ฟังก์ชันนี้เป็นส่วนหนึ่งของส่วนติดต่อการสตรีมใน React 18 และออกแบบมาสำหรับสภาพแวดล้อมที่รองรับมาตรฐานสตรีมบนเว็บ ซึ่ง Cloudflare Workers รองรับ

ตัวจัดการเส้นทาง SSR ทั่วไปจะเรียก renderToReadableStream พร้อมคอมโพเนนต์ React ราก รอให้สตรีมพร้อม แล้วใช้ c.body(stream, { headers: { 'Content-Type': 'text/html' } }) หรือ c.html(htmlString) เพื่อส่งการตอบกลับ สตรีมจะสร้างชิ้นส่วน HTML ที่เบราว์เซอร์สามารถเรนเดอร์ได้อย่างต่อเนื่อง

renderToReadableStream จะคืนค่าพรอมิสที่แก้ไขผลลัพธ์เป็น ReadableStream ซึ่งประกอบด้วยชิ้นส่วน HTML ReadableStream นี้สอดคล้องกับมาตรฐานสตรีมบนเว็บและสามารถส่งต่อเป็นเนื้อหาของอ็อบเจ็กต์ Response ได้โดยตรง จึงเหมาะอย่างยิ่งกับตัวจัดการ fetch ของ Cloudflare Workers

สตรีม React จะสร้าง HTML ของต้นไม้คอมโพเนนต์ แต่ไม่รวมเอกสารส่วนที่ล้อมรอบ คุณต้องแทรกสตรีมลงในเชลล์ HTML ซึ่งเป็นสตริงที่ประกอบด้วย doctype, head ที่มีเมตาแท็กและลิงก์ CSS, แท็กเปิด body จากนั้นจึงเป็นสตรีม React แล้วตามด้วยแท็กปิด body และ html

ชุดโปรแกรมไคลเอ็นต์ React ที่สร้างด้วย Vite จำเป็นต้องให้บริการควบคู่ไปกับ Worker โดย Cloudflare Pages หรือฟีเจอร์ Workers Assets จะจัดการเรื่องนี้ให้: c.env.ASSETS.fetch(request) จะส่งคำขอทรัพยากร (JS, CSS และรูปภาพ) ไปยังไฟล์คงที่ที่อัปโหลดพร้อมกับการนำ Worker ไปใช้งาน

ไฟล์เริ่มต้นของ Worker จะส่งออกอ็อบเจ็กต์เริ่มต้นที่มีตัวจัดการ fetch: export default { fetch: app.fetch } เมธอด app.fetch ของ Hono เป็นตัวจัดการ fetch ที่เข้ากันได้อยู่แล้ว โดยรับ Request และคืนค่า Response จึงเชื่อมต่อเข้ากับรันไทม์ Workers ได้โดยตรง

wrangler dev จะเริ่มเซิร์ฟเวอร์พัฒนาในเครื่องที่จำลองรันไทม์ Cloudflare Workers บนเครื่องของคุณ ระบบจะตรวจดูการเปลี่ยนแปลงของไฟล์และโหลดใหม่โดยอัตโนมัติ ทำให้มีวงจรการพัฒนาในเครื่องที่รวดเร็วก่อนนำไปใช้งานจริง

wrangler deploy จะรวมชุดและอัปโหลดโค้ด Worker ของคุณไปยังเครือข่าย Cloudflare ทำให้โค้ดทำงานอยู่ที่ตำแหน่งให้บริการขอบเครือข่ายมากกว่า 300 แห่งภายในไม่กี่วินาที ไฟล์การกำหนดค่า wrangler.toml จะระบุ ID บัญชี ชื่อ Worker และการเชื่อมโยงเนมสเปซ KV หรือฐานข้อมูล D1

สำหรับการโต้ตอบฝั่งไคลเอ็นต์ ให้ส่ง bootstrapScripts: ['/assets/client.js'] ไปยัง renderToReadableStream React จะแทรกแท็กสคริปต์ลงใน HTML เพื่อโหลดชุดโปรแกรมไคลเอ็นต์และเรียก hydrateRoot บน DOM ที่เรนเดอร์ฝั่งเซิร์ฟเวอร์ ทำให้หน้าโต้ตอบได้หลังจากโหลด JS แล้ว

renderToReadableStream คืนค่าอะไร

Hono มีเฟรมเวิร์ก HTTP น้ำหนักเบาที่รองรับการทำงานที่ขอบเครือข่ายโดยธรรมชาติ และผสานรวมกับ renderToReadableStream ของ React ได้อย่างราบรื่น ไฟล์เริ่มต้นของ Worker จะส่งออก app.fetch ไปยังรันไทม์ Workers โดยตรง ทรัพยากรคงที่ให้บริการผ่านการเชื่อมโยง ASSETS และ wrangler จัดการทั้งการพัฒนาในเครื่องและการนำไปใช้งานจริง bootstrapScripts เชื่อม HTML ที่สตรีมเข้ากับชุดโปรแกรมไฮเดรตฝั่งไคลเอ็นต์