pazguille/rsc.jsx

## rsc.jsx
// deno run --allow-net rsc.jsx
// deno run --allow-net https://gist.githubusercontent.com/pazguille/a2e3792c1901e12e67453ccb19cc0da6/raw/752200e809993fd2176381b7b09d8308dca6d069/rsc.jsx

import { serve } from 'https://deno.land/std/http/server.ts';
import React, { Suspense } from "https://esm.sh/react@18.3.0-next-8e17bfd14-20230322";
import ReactDOMServer from 'https://esm.sh/react-dom@18.3.0-next-8e17bfd14-20230322/server';
import ReactServerDOMServer from 'https://esm.sh/react-server-dom-webpack@18.3.0-next-8e17bfd14-20230322/server.browser';
import ReactServerDOMClient from 'https://esm.sh/react-server-dom-webpack@18.3.0-next-8e17bfd14-20230322/client';

function Hello({ name }) {
  return <p>Hello {name}!</p>;
}

async function Games() {
  const data = await fetch('https://api.xstoregames.com/api/games?list=new&skipitems=0').then(r => r.json());
  await new Promise(r => setTimeout(r, 2000));
  return (
    <ul>
      {data.map(game => (<li>{game.title}</li>))}
    </ul>
  );
}

function Home() {
  return (
    <>
      <h1>Deno + RSC</h1>
      <Hello name="Guille" />
      <Suspense fallback={<p>Loading...</p>}>
        <Games />
      </Suspense>
    </>
  );
}

function App({ children }) {
  return (
    <html>
      <head>
        <title>Deno + RSC</title>
      </head>
      <body>
        {children}
      </body>
    </html>
  );
}

function ClientRoot({ response }) {
  return React.use(response);
}

async function handler(req) {
  if (req.url.includes('favicon')) {
    return new Response(null, {
      status: 204,
    });
  };

  const rscStream = ReactServerDOMServer.renderToReadableStream(
    <App>
      <Home />
    </App>
  );

  const response = ReactServerDOMClient.createFromReadableStream(rscStream);

  const htmlStream = await ReactDOMServer.renderToReadableStream(<ClientRoot response={response} />);

  return new Response(htmlStream, {
    headers: {
      "content-type": "text/html",
    },
  });
}

serve(handler, { port: 3030 });
	// deno run --allow-net rsc.jsx
	// deno run --allow-net https://gist.githubusercontent.com/pazguille/a2e3792c1901e12e67453ccb19cc0da6/raw/752200e809993fd2176381b7b09d8308dca6d069/rsc.jsx

	import { serve } from 'https://deno.land/std/http/server.ts';
	import React, { Suspense } from "https://esm.sh/react@18.3.0-next-8e17bfd14-20230322";
	import ReactDOMServer from 'https://esm.sh/react-dom@18.3.0-next-8e17bfd14-20230322/server';
	import ReactServerDOMServer from 'https://esm.sh/react-server-dom-webpack@18.3.0-next-8e17bfd14-20230322/server.browser';
	import ReactServerDOMClient from 'https://esm.sh/react-server-dom-webpack@18.3.0-next-8e17bfd14-20230322/client';

	function Hello({ name }) {
	return <p>Hello {name}!</p>;
	}

	async function Games() {
	const data = await fetch('https://api.xstoregames.com/api/games?list=new&skipitems=0').then(r => r.json());
	await new Promise(r => setTimeout(r, 2000));
	return (
	<ul>
	{data.map(game => (<li>{game.title}</li>))}
	</ul>
	);
	}

	function Home() {
	return (
	<>
	<h1>Deno + RSC</h1>
	<Hello name="Guille" />
	<Suspense fallback={<p>Loading...</p>}>
	<Games />
	</Suspense>
	</>
	);
	}

	function App({ children }) {
	return (
	<html>
	<head>
	<title>Deno + RSC</title>
	</head>
	<body>
	{children}
	</body>
	</html>
	);
	}

	function ClientRoot({ response }) {
	return React.use(response);
	}

	async function handler(req) {
	if (req.url.includes('favicon')) {
	return new Response(null, {
	status: 204,
	});
	};

	const rscStream = ReactServerDOMServer.renderToReadableStream(
	<App>
	<Home />
	</App>
	);

	const response = ReactServerDOMClient.createFromReadableStream(rscStream);

	const htmlStream = await ReactDOMServer.renderToReadableStream(<ClientRoot response={response} />);

	return new Response(htmlStream, {
	headers: {
	"content-type": "text/html",
	},
	});
	}

	serve(handler, { port: 3030 });