yusukebe/streaming2.tsx

## streaming2.tsx
import { Hono } from 'hono'
import { Suspense, renderToReadableStream } from 'hono/jsx/streaming'
import { Todo } from './types'

const app = new Hono()

const fetchData = async () => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/todos/1`)
  return res.json<Todo>()
}

const Component = async () => {
  const data = await fetchData()
  return <div>{data.title}</div>
}

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

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

	const app = new Hono()

	const fetchData = async () => {
	const res = await fetch(`https://jsonplaceholder.typicode.com/todos/1`)
	return res.json<Todo>()
	}

	const Component = async () => {
	const data = await fetchData()
	return <div>{data.title}</div>
	}

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

	export default app