app-routes-index.tsx

import { createRoute } from 'honox/factory'
import { Suspense } from 'hono/jsx'
import { getContext } from 'hono/context-storage'

export const getData = async (userId: string | undefined) => {
  await new Promise((resolve) => setTimeout(resolve, 1000))
  if (!userId) {
    return undefined
  }
  const userData = getContext().var.db.getUser(userId)
  return userData
}

async function UserComponent({ userId }) {
  const user = await getData(userId)
  if (!user) {
    getContext().status(404)
    return <div>User not found</div>
  }
  return <div>User name is {user.name}</div>
}

export default createRoute(async (c) => {
  const userId = c.req.query('userId')
  return c.render(
    <Suspense fallback={<div>Loading...</div>}>
      <UserComponent userId={userId} />
    </Suspense>
  )
})