Can the Hono server send a JSX client component? #2442

mapokapo · 2024-03-30T23:18:57Z

mapokapo
Mar 30, 2024

I am trying to use Hono to make an API with a few endpoints, and consume that API in JSX components which are also statically served from Hono (like an SPA).
The idea is to make a really quick and simple MVP which includes both a server API and an interactive client within the same Hono project, without using React or making a separate client project.

For example, in the following code:

const app = new Hono();

const Layout = (children: unknown) => html`<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    ${children}
  </body>
</html>`

app.get("/", c => {
  return c.html(
    <Layout>
      <Home />
    </Layout>
  );
});

Is it possible for Home to be a JSX component which uses useState and useEffect (from hono/jsx/dom)?

LeonAlvarez · 2024-04-08T09:03:29Z

LeonAlvarez
Apr 8, 2024

Check
#2002

The approach is to use Islands
https://github.com/honojs/honox?tab=readme-ov-file#interactions

1 reply

mapokapo Apr 13, 2024
Author

So the only solution is to use Honox? In that case, does an already existing Hono server require too much modification in order to work with islands, or is it a drop-in replacement?

yusukebe · 2024-04-13T15:47:38Z

yusukebe
Apr 13, 2024
Maintainer

Hi @mapokapo

You can refer to this project: https://github.com/yusukebe/hono-jsx-dom-with-vite

It's hard to make hydrate mechanize client-side interaction with server-rendered pages. But you can write a simple SPA like the above.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hono

Can the Hono server send a JSX client component? #2442

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{title}}

Select a reply

Hono

Can the Hono server send a JSX client component? #2442

mapokapo Mar 30, 2024

Replies: 2 comments · 1 reply

LeonAlvarez Apr 8, 2024

mapokapo Apr 13, 2024 Author

yusukebe Apr 13, 2024 Maintainer

mapokapo
Mar 30, 2024

Replies: 2 comments 1 reply

LeonAlvarez
Apr 8, 2024

mapokapo Apr 13, 2024
Author

yusukebe
Apr 13, 2024
Maintainer