Skip to content

Instantly share code, notes, and snippets.

@pazguille

pazguille/rsc.jsx

Last active April 11, 2024 05:35
Show Gist options
  • Save pazguille/a2e3792c1901e12e67453ccb19cc0da6 to your computer and use it in GitHub Desktop.
Save pazguille/a2e3792c1901e12e67453ccb19cc0da6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. pazguille revised this gist Mar 26, 2023. 1 changed file with 11 additions and 1 deletion.
    12 changes: 11 additions & 1 deletion rsc.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,8 @@
    import { serve } from 'https://deno.land/std/http/server.ts';
    import React, { Suspense } from "https://esm.sh/[email protected]";
    import ReactDOMServer from 'https://esm.sh/[email protected]/server';
    import ReactServerDOMServer from 'https://esm.sh/[email protected]/server.browser';
    import ReactServerDOMClient from 'https://esm.sh/[email protected]/client';

    function Hello({ name }) {
    return <p>Hello {name}!</p>;
    @@ -44,19 +46,27 @@ function App({ children }) {
    );
    }

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

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

    const htmlStream = await ReactDOMServer.renderToReadableStream(
    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",
  2. pazguille revised this gist Mar 25, 2023. 1 changed file with 0 additions and 9 deletions.
    9 changes: 0 additions & 9 deletions rsc.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -4,8 +4,6 @@
    import { serve } from 'https://deno.land/std/http/server.ts';
    import React, { Suspense } from "https://esm.sh/[email protected]";
    import ReactDOMServer from 'https://esm.sh/[email protected]/server';
    // import ReactRSCServer from 'https://esm.sh/[email protected]/server.browser';
    // import ReactRSCClient from 'https://esm.sh/[email protected]/client';

    function Hello({ name }) {
    return <p>Hello {name}!</p>;
    @@ -53,13 +51,6 @@ async function handler(req) {
    });
    };

    // const rscStream = await ReactRSCServer.renderToReadableStream(
    // <App>
    // <Home />
    // </App>
    // );
    // const jsx = await ReactRSCClient.createFromReadableStream(rscStream);

    const htmlStream = await ReactDOMServer.renderToReadableStream(
    <App>
    <Home />
  3. pazguille revised this gist Mar 25, 2023. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions rsc.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    // deno run --allow-net rsc.jsx
    // deno run --allow-net https://gist.github.com/pazguille/a2e3792c1901e12e67453ccb19cc0da6/raw/752200e809993fd2176381b7b09d8308dca6d069/rsc.jsx

    import { serve } from 'https://deno.land/std/http/server.ts';
    import React, { Suspense } from "https://esm.sh/[email protected]";
  4. pazguille created this gist Mar 25, 2023.
    75 changes: 75 additions & 0 deletions rsc.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,75 @@
    // deno run --allow-net rsc.jsx

    import { serve } from 'https://deno.land/std/http/server.ts';
    import React, { Suspense } from "https://esm.sh/[email protected]";
    import ReactDOMServer from 'https://esm.sh/[email protected]/server';
    // import ReactRSCServer from 'https://esm.sh/[email protected]/server.browser';
    // import ReactRSCClient from 'https://esm.sh/[email protected]/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>
    );
    }

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

    // const rscStream = await ReactRSCServer.renderToReadableStream(
    // <App>
    // <Home />
    // </App>
    // );
    // const jsx = await ReactRSCClient.createFromReadableStream(rscStream);

    const htmlStream = await ReactDOMServer.renderToReadableStream(
    <App>
    <Home />
    </App>
    );

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

    serve(handler, { port: 3030 });