cabaalexander/suspense.tsx

## suspense.tsx
import { Hono } from 'hono'
import { jsxRenderer } from 'hono/jsx-renderer'
import { Suspense } from 'hono/jsx/streaming'

const app = new Hono()

const Component = async () => {
  const res = await fetch('https://ramen-api.dev/shops/yoshimuraya')
  await new Promise((r) => setTimeout(r, 8000)) // <-- delay here
  const data = await res.json<{ shop: { name: string } }>()
  return <div>{data.shop.name} 🍜</div>
}

app.get(
  '*',
  jsxRenderer(
    ({ children }) => {
      return (
        <html>
          <body>{children}</body>
        </html>
      )
    },
    {
      stream: true
    }
  )
)

app.get('/', (c) => {
  return c.render(
    <Suspense fallback={<div>loading...</div>}>
      <Component />
    </Suspense>
  )
})

export default app
	import { Hono } from 'hono'
	import { jsxRenderer } from 'hono/jsx-renderer'
	import { Suspense } from 'hono/jsx/streaming'

	const app = new Hono()

	const Component = async () => {
	const res = await fetch('https://ramen-api.dev/shops/yoshimuraya')
	await new Promise((r) => setTimeout(r, 8000)) // <-- delay here
	const data = await res.json<{ shop: { name: string } }>()
	return <div>{data.shop.name} 🍜</div>
	}

	app.get(
	'*',
	jsxRenderer(
	({ children }) => {
	return (
	<html>
	<body>{children}</body>
	</html>
	)
	},
	{
	stream: true
	}
	)
	)

	app.get('/', (c) => {
	return c.render(
	<Suspense fallback={<div>loading...</div>}>
	<Component />
	</Suspense>
	)
	})

	export default app