Skip to content
HonoA full-stack playground

Typed on both sides

Refresh a typed API response without leaving the page.

The route loader prepares the initial sample. Client navigation and refresh request fresh data through the Hono RPC client.

RPC response

Response ready

Refresh to request fresh data from GET /api/rpc/hello.

Server
Hono RPC
Timestamp
Fetch time
-
Message
Hello, World!
View JSON
{
  "message": "Hello, World!",
  "server": "Hono RPC",
  "timestamp": "2026-11-13T17:38:20.281Z"
}

Endpoint contract

The Hono client derives request and response types from the API contract.

Endpoint
GET /api/rpc/hello
Implementation
packages/bff/src/api.ts
Initial source
Route loader, prepared for each page request
Refresh path
Action button → Hono RPC client

How it works

Initial markup, client requests, and shared types each have a clear role.

  1. Server-rendered response

    The route loader prepares the initial sample on the server for each page request. The first HTML already contains the response data.

  2. Hydrated data

    The initial server-rendered response stays visible while the client can fetch fresh data on demand.

  3. Client refresh

    The button fetches fresh RPC data without reloading the page.

  4. Typed boundary

    The hc() client keeps route code aligned with the API contract.