feat(react-renderer): Support renderToReadableStream options for hydration

[yoshikouki]

Features

• Adds support for renderToReadableStream options in (react-renderer)
• Enables more flexible and performance-optimized hydration strategies

Benefits

• Using react-renderer brings interaction to our hono application and also supports <Suspense>
• Allows control of render process options

Examples of use

https://github.com/yoshikouki/hono-spa-react-bun/blob/46208aa2ffa6c9375ccea14e9d724496850e336c/src/index.tsx#L29-L37

// src/index.tsx

app.get(
  "*",
  reactRenderer(Layout, {
    stream: true,
    readableStreamOptions: {
      bootstrapScripts: ["/src/client.tsx"],
    },
  })
);

app.get("/", (c) => {
  return c.render(<App />);
});

// src/client.tsx
import { hydrateRoot } from "react-dom/client";
import { App, Layout } from "./app";

hydrateRoot(
  document,
  <Layout>
    <App />
  </Layout>
);

Ref:

https://react.dev/reference/react-dom/server/renderToReadableStream#rendering-a-react-tree-as-html-to-a-readable-web-stream

[changeset-bot]

🦋 Changeset detected

Latest commit: 4b66f92

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@hono/react-renderer	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[yusukebe]

Hi @yoshikouki !

This is a good feature! I've left one comment. Thanks!

[yusukebe]

LGTM!

[yusukebe]

@yoshikouki

Thank you for your quick response. I'll merge this now!

[yoshikouki]

Thanks for your review!