yusukebe/streaming-ssr.tsx

## streaming-ssr.tsx
import React, { Suspense } from 'react'
import { renderToReadableStream } from 'react-dom/server'
import { Hono } from 'hono'

const DELAY = 2000
let done = false

const Component: React.FC = () => {
  if (done) {
    done = false
    return (
      <p>
        <b>Hello World!!</b>
      </p>
    )
  }
  throw new Promise((resolve) =>
    setTimeout(() => {
      done = true
      resolve(true)
    }, DELAY)
  )
}

const app = new Hono()
app.get('/', async (c) => {
  const stream = await renderToReadableStream(
    <html>
      <body>
        <Suspense fallback={<p>Loading...</p>}>
          <Component />
        </Suspense>
      </body>
    </html>
  )
  return new Response(stream, {
    headers: {
      'X-Content-Type-Options': 'nosniff',
      'Content-Type': 'text/html',
    },
  })
})

export default app
	import React, { Suspense } from 'react'
	import { renderToReadableStream } from 'react-dom/server'
	import { Hono } from 'hono'

	const DELAY = 2000
	let done = false

	const Component: React.FC = () => {
	if (done) {
	done = false
	return (
	<p>
	<b>Hello World!!</b>
	</p>
	)
	}
	throw new Promise((resolve) =>
	setTimeout(() => {
	done = true
	resolve(true)
	}, DELAY)
	)
	}

	const app = new Hono()
	app.get('/', async (c) => {
	const stream = await renderToReadableStream(
	<html>
	<body>
	<Suspense fallback={<p>Loading...</p>}>
	<Component />
	</Suspense>
	</body>
	</html>
	)
	return new Response(stream, {
	headers: {
	'X-Content-Type-Options': 'nosniff',
	'Content-Type': 'text/html',
	},
	})
	})

	export default app