Building a Custom React Router SSR Server With Hono

When operating a React Router application in framework mode, you automatically receive SSR. For production, @react-router/serve offers a lightweight server built on Express, but it carries some historical baggage. If you want a lighter server or more control, Hono (and its Node server) provides an alternative with virtually no setup.

Hono follows web standards, allowing a request from Hono to be directly passed to React Router without conversion or bridging. Installing Hono and @hono/node-server is necessary to run it on Node. To set up, install both (npm i hono @hono/node-server) and import the required modules: Hono, createRequestHandler from react-router, and serve from @hono/node-server.

Create a request handler using createRequestHandler and a Hono application. Use the handler with the app by calling async (context) = handler(context.req.raw). Finally, serve the application with serve, passing the fetch method and port. For boosted performance, you can eliminate the app and use a bare request listener, creating a server with createServer and getRequestListener from @hono/node-server.

Hono is built on Node's HTTP primitives and does not provide a web Request or Response, unlike Fastify. While Fastify is great for JSON APIs with schema-based validation, Hono simplifies SSR apps by removing the need for unnecessary adapters and overhead. Consider providing loadContext manually, as it's not passed to the handler function in examples, and examine @react-router/express for additional server setup insights.