yusukebe/streaming.tsx

## streaming.tsx
import { Hono } from 'hono'
import { use, Suspense, renderToReadableStream } from 'hono/jsx/streaming'
import type { Shop } from './types'

const app = new Hono()

const fetchData = async (): Promise<{ shop: Shop }> => {
  const res = await fetch('https://ramen-api.dev/shops/yoshimuraya')
  return res.json()
}

const AsyncComponent = () => {
  const data = use(fetchData())
  return <p>I like {data.shop.name} 🍜</p>
}

app.get('/', async (c) => {
  const stream = renderToReadableStream(
    <html>
      <body>
        <h1>SSR Streaming</h1>
        <Suspense fallback={<p>loading...</p>}>
          <AsyncComponent />
        </Suspense>
      </body>
    </html>
  )
  return c.body(stream, {
    headers: {
      'Transfer-Encoding': 'chunked',
      'Content-Type': 'text/html; charset=UTF-8'
    }
  })
})

export default app
	import { Hono } from 'hono'
	import { use, Suspense, renderToReadableStream } from 'hono/jsx/streaming'
	import type { Shop } from './types'

	const app = new Hono()

	const fetchData = async (): Promise<{ shop: Shop }> => {
	const res = await fetch('https://ramen-api.dev/shops/yoshimuraya')
	return res.json()
	}

	const AsyncComponent = () => {
	const data = use(fetchData())
	return <p>I like {data.shop.name} 🍜</p>
	}

	app.get('/', async (c) => {
	const stream = renderToReadableStream(
	<html>
	<body>
	<h1>SSR Streaming</h1>
	<Suspense fallback={<p>loading...</p>}>
	<AsyncComponent />
	</Suspense>
	</body>
	</html>
	)
	return c.body(stream, {
	headers: {
	'Transfer-Encoding': 'chunked',
	'Content-Type': 'text/html; charset=UTF-8'
	}
	})
	})

	export default app