[{"_1":2,"_37":-5,"_38":-5},"loaderData",{"_3":4},"routes/_main.tags.$tag",{"_5":6,"_36":20},"posts",[7],{"_8":9,"_10":11,"_12":13,"_14":15,"_16":17,"_30":31,"_32":33,"_34":35},"slug","streaming-dynamic-html-with-hono","title","Streaming Dynamic and Asynchronous HTML with Hono and JSX","description","Learn how to stream dynamic HTML content using Hono.js and JSX. This post provides a code example of how to use async generators and Suspense to stream non-append-only data to the browser, creating a dynamic and responsive user experience.","date","2024-06-01","tags",[18,19,20,21,22,23,24,25,26,27,28,29],"async","cloudflare-workers","edge-computing","hono","javascript","jsx","react","server-side-rendering","ssr","streaming","suspense","web-framework","content","

Hono is a web app framework for the latest generation of JavaScript and its new frameworks and runtimes. It's really great, and I like it a lot.

One of its really interesting features is that it supports streaming JSX to the browser, very similar to Next.js with React Server Components, but it does it with inline scripts without needing a full-scale framework in the browser.

You can even use Suspense and so on, allowing you to create, for example, an app shell with async logic inside:

<>\n  <Header />\n  <Suspense fallback={<Loading />}>\n    <LoadAsyncData />\n  </Suspense>\n</>\n

But while I was experimenting with a recent project, I wanted to try streaming my results to the browser. Unfortunately, the data is not just append-only, so I wondered if there was a way to get Hono to replace the data.

After some experimentation and a lot of complicated attempts, I found a way to do it that turned out to be relatively simple. See the AsyncList component below for the solution:

async function AsyncList({\n  generator,\n}: {\n  generator: AsyncGenerator<any, any, any>;\n}) {\n  const value = await generator.next();\n\n  if (value.done) {\n    return value.value;\n  }\n\n  return (\n    <Suspense fallback={value.value}>\n      <AsyncList generator={generator} />\n    </Suspense>\n  );\n}\n\nconst timer = (ms: number) =>\n  new Promise<string>((resolve) => setTimeout(() => resolve('hello!'), ms));\n\napp.get('/test', (c) => {\n  return c.render(\n    <Suspense fallback={<div>Loading...</div>}>\n      <AsyncList\n        generator={(async function* () {\n          yield <div>hello</div>;\n          await timer(1000);\n          yield <div>world</div>;\n          await timer(1000);\n          return <div>goodbye</div>;\n        })()}\n      />\n    </Suspense>\n  );\n});\n

","excerpt","Hono is a web app framework for the latest generation of JavaScript and its new frameworks and runtimes. It's really great, and I like it a lot.\nOne of its really interesting features is that it...","readingTime",2,"tag","actionData","errors"]

Posts tagged "edge-computing"

Streaming Dynamic and Asynchronous HTML with Hono and JSX