تقديم من جانب الخادم (SSR) لمكون React

للبدء، قم بتثبيت react و react-dom:

# يمكن استخدام أي مدير حزم
bun add react react-dom

لتقديم مكون React إلى تيار HTML من جانب الخادم (SSR):

tsx

import { renderToReadableStream } from "react-dom/server";

function Component(props: { message: string }) {
  return (
    <body>
      <h1>{props.message}</h1>
    </body>
  );
}

const stream = await renderToReadableStream(<Component message="مرحبًا من الخادم!" />);

بدمج هذا مع Bun.serve()، نحصل على خادم HTTP SSR بسيط:

tsx

Bun.serve({
  async fetch() {
    const stream = await renderToReadableStream(<Component message="مرحبًا من الخادم!" />);
    return new Response(stream, {
      headers: { "Content-Type": "text/html" },
    });
  },
});

React 19 والإصدارات الأحدث تتضمن تحسين SSR يستفيد من تنفيذ Bun المباشر لـ ReadableStream. إذا واجهت خطأً مثل export named 'renderToReadableStream' not found، فتأكد من تثبيت الإصدار 19 من react و react-dom، أو استورد من react-dom/server.browser بدلاً من react-dom/server. راجع facebook/react#28941 للحصول على مزيد من المعلومات.