https://github.com/devongovett/rsc-html-stream

Inject an RSC payload into an HTML stream and read it back
https://github.com/devongovett/rsc-html-stream

Last synced: 8 months ago
JSON representation

Inject an RSC payload into an HTML stream and read it back

• Host: GitHub
• URL: https://github.com/devongovett/rsc-html-stream
• Owner: devongovett
• License: mit
• Created: 2024-02-19T19:06:04.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-27T04:35:35.000Z (over 2 years ago)
• Last Synced: 2024-04-14T13:21:14.605Z (about 2 years ago)
• Language: JavaScript
• Size: 8.79 KB
• Stars: 124
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# rsc-html-stream

A small utility to inject a React Server Components payload into an HTML stream on the server, and read it back into a stream on the client. This is useful when rendering RSC to an initial HTML response to avoid an extra HTTP request to hydrate the page on the client. Instead, the payload is injected into the initial HTML as a series of `` elements, and re-combined together into a `ReadableStream` on the client.

## Usage

On the server, use the `injectRSCPayload` function from `rsc-html-stream/server` to create a `TransformStream` that injects the RSC payload stream into the HTML stream.

```js

import {renderToReadableStream} from 'react-server-dom-BUNDLER/server.edge';

import {createFromReadableStream} from 'react-server-dom-BUNDLER/client.edge';

import {renderToReadableStream as renderHTMLToReadableStream} from 'react-dom/server.edge';

import {injectRSCPayload} from 'rsc-html-stream/server';

// Render a component to RSC payload using bundler integration package.

let rscStream = renderToReadableStream(<App />);

// Fork the stream, and render it to HTML.

let [s1, s2] = rscStream.tee();

let data;

function Content() {

  data ??= createFromReadableStream(s1);

  return React.use(data);

}

let htmlStream = await renderHTMLToReadableStream(<Content />);

// Inject the RSC stream into the HTML stream.

let response = htmlStream.pipeThrough(injectRSCPayload(s2));

```

On the client, use the `rscStream` from `rsc-html-stream/client` to hydrate the page. This is a `ReadableStream` that includes the RSC payload injected into the HTML by the server.

```js

import ReactServerDOMReader from 'react-server-dom-BUNDLER/client';

import {rscStream} from 'rsc-html-stream/client';

let data;

function Content() {

  data ??= ReactServerDOMReader.createFromReadableStream(

    rscStream

  );

  return React.use(data);

}

```