How to use Async Server Component with honojs?

[RuslanGlaznyov]

Example:

const AsyncComp = async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    return <h1>Hello from async</h1>;
};
export default (c) => {
 return c.html(
    <div>
      <AsyncComp />
    </div>
   
 )
}

If I try to use this I have an error from ts:

'Promise<HtmlEscapedString>' is not an assignable to type string. 

But even if I run it

I got the error in the console

TypeError: str.search is not a function

jsx tsconfig is:
"jsx": "react-jsx",
"jsxFragmentFactory": "Fragment",
"jsxImportSource": "hono/jsx"

Typescript version is: 5.2.2
Honojs version: 3.7.5

[RuslanGlaznyov]

Any idea how to enable this like in nextjs?
https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md

[RuslanGlaznyov]

I can't find that hono supports async server component.
I used jsxte with hono. At first look, it works well.
Do you have any better ideas?

[yusukebe]

Hi,

If we decide to support async components, it won't happen immediately. And I think it's not as necessary as client-side JSX like React since you can write async procedures in the handler.

I think if "jsxte" works well, you can use it. We can use any JSX libraries, not only Hono-JSX.

[RuslanGlaznyov]

Hi @yusukebe , thanks for your reply! But I don't understand what you mean when say that the async component is not as necessary as client-side JSX like React, because on the client side such as React no Async component at all, this feature exists in the next.js, and is used on the server side.
https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md

[yusukebe]

@RuslanGlaznyov

Indeed, perhaps my thought is incorrect. As you mentioned, it's beneficial that we can use async in components. There's a possibility that allowing async may decrease the performance, so I'll consider this for implementation.

Additionally, if we can utilize streaming, similar to React Streaming with Suspense, it would be extremely intriguing and a significant advantage for us, don't you think? However, it might be too challenging to implement :)

[sjc5]

You can always do this as a workaround until the new PR is merged:

async function Whatever(props: any) {
  const thing = await getThing();
  return <div>{thing}</div>;
}

async function WhateverWrapper() {
  return <div>{await Whatever({ ...props })}</div>
}

It's ugly but it works fine to do async components today