::
FIG 2.1 // ENTRY
Back to Index

TanStack Hono - A SSR Monolith with Tanstack Router and Hono

Date:
TanStack Hono - A SSR Monolith with Tanstack Router and Hono Hero Image

Preface

I’ve been using TanStack Router and Hono for a while and appreciate their shared philosophy: TanStack Router offers a strongly typed, data-aware routing core, while Hono provides a tiny, fast, standards-based HTTP layer.

This project explores combining them into a single TypeScript SSR + CSR monolith. It runs as one process in development, handling server-rendered React routes, client hydration, and lightweight RPC endpoints without the weight of a full meta-framework.

I adapted the official TanStack Router SSR example, swapping Express for Hono and adding a typed RPC API.

Repo: github.com/bskimball/tanstack-hono

Development relies on the Hono dev server with Vite, ensuring hot reloading works across routes, server handlers, and shared types.

Why Hono?

Hono is a minimalist, high-performance web framework. Its small footprint makes it ideal for serverless and edge environments. Its middleware system makes composing request handlers, RPCs, Zod validations, and OpenAPI-compatible REST APIs straightforward.

Why TanStack Router?

TanStack Router is a powerful routing library with first-class type safety and data awareness. It supports nested routes, route loaders, and seamless React integration. Its type safety catches errors at compile time, and its flexibility allows it to run in various environments.

Why a “Monolith”?

Here, “Monolith” means a single repository and runtime process handling:

  • HTTP routing (API + SSR HTML).
  • React server rendering + hydration.
  • Static asset compilation (Vite).
  • Type-safe internal RPC endpoints.

The goal: low operational complexity with progressive enhancement and dynamic UI.

Architecture Overview

  1. Request enters Hono.
  2. API/RPC Check: Matches against routes like /api/todos. If matched, returns JSON.
  3. SSR Fallback:
    • Creates a TanStack Router instance.
    • Resolves route elements (no framework-specific loaders).
    • Renders React to string/stream.
    • Injects serialized router state and asset tags.
  4. Hydration: Client hydrates the router; subsequent navigation is client-side.

File Layout

src/
  components/      # Shared React components
  routes/          # TanStack Router file-routes
    __root.tsx
    index.tsx
    about.tsx
    todos/
  api/             # Hono handlers / RPC
    todos.ts
  shared/          # Shared Types / Zod schemas
    types.ts
  entry-client.tsx # Hydration entry
  entry-server.tsx # Server render entry