Use Hono routing directly?

[alexturpin]

Hello everyone,

Just found this package, been looking for a long time for a lightweight solution to render React applications on Cloudflare workers. I'm trying to see if I can integrate ssrx by using Hono's routing directly. For instance:

app.get("/", async (c) => {
  return renderPage(c.req, <Home />) // Or maybe a middleware or something on context
})

However I'm not too sure what the best practices around that would be; right now I export createApp:

export const { clientHandler, serverHandler, ctx } = createApp({
  appRenderer:
    ({ req }) =>
    () =>
      (
        <div>
          My App <Counter />
        </div>
      ),
  plugins: [assetsPlugin()],
})

And can always render that simple app in my route:

app.get("/react", async (c) => {
  const { stream, statusCode } = await serverHandler({
    req: c.req.raw,
  })

  return new Response(stream, { status: statusCode(), headers: { "Content-Type": "text/html" } })
})

But I'm wondering if people have any thoughts on best practices / a neat way to wrap this up so I can use it directly with Hono's routing. Should I write a plugin? Will I be unable to benefit from code splitting if I do it this way, and I should just swallow my pride and use react-router for those routes?

Thanks for any feedback you might have!

[marbemac]

Hmm, I guess there is kind of an expectation that one is using a client side router. For your use case, how are you planning to do routing on the client side? A full page reload on every link click?

[marbemac]

I see - is it a homegrown client-side router? And what kind of "top level pages"? Trying to wrap my head around the use case :).

[alexturpin]

Absolutely, I appreciate the time, I'd love to elaborate.

My overall app uses React for a marketing website with several "top level" pages (home, about, terms and conditions), as well as a specific high interactivity "app" page, call it /app. That app page has its own client-side router (wouter) with a base of /app, so it manages the SPA-ness routing I need there.

Right now I'm using Astro which cannot render my React UI framework correctly using SSR, so I'm exploring other solutions. With ssrx so far it sounds like I would use something like react-router to do that "top level pages" routing, and I can still have my little client-side routing separate for my app.

[marbemac]

Ah yeah I see. Yes w SSRx the best option is probably to just use something like react-router to do the top level routing. That said, pages like about, terms of service, etc, are particularly well suited to server components - have you considered trying to embed your wouter app into a nextjs app? Where next handles the shell and marketing pages, and renders your wouter app at /app/*?

I'm not a huge nextjs fan myself, BUT it might be a decent alternative option for your use case.

[alexturpin]

Thanks for the suggestion! I'm really not a fan of Next in general, and especially on Cloudflare Workers I find it doesn't make a lot of sense. Compatibility is better but Next.js is still very heavy from a server code perspective in an environment where size matters. Additionally I'd rather be more in control seeing as emulating all Cloudflare functionality locally hasn't always been straightforward. Thank you for all the feedback!

[alexturpin]

The ergonomics of react-router v7 are actually looking even nicer, so combining that with @SSRX might just be the overall killer solution I'd been looking for!