tRPC — Type-safe API
This frontend calls the Hono+tRPC Worker backend with end-to-end type safety. Types are shared through the monorepo, without codegen or duplicated schemas.
Server Component — pre-rendered
Data fetched on the server via api.users.list.query() — zero client JS for this section.
3
Users
2
Posts
Client Components — React Query + tRPC
Interactive components with trpc.users.list.useQuery() — caching, automatic refetch, type-safe mutations.
Client transport
The browser cannot call service bindings directly; binding mode uses local /api/trpc proxy on the Web Worker.
Users
Loading...
Posts
Loading...
What does this show?
- ‣Monorepo type sharing —
AppRouterimported from the API package, with Zod models from the shared package - ‣Server Components — pre-rendered data with the vanilla tRPC client, zero JS bundle
- ‣Client Components —
@trpc/react-querypara interactive queries/mutations - ‣Shared validation — schemas Zod en
@opennext-boilerplate/sharedused in API and frontend - ‣Hono + tRPC on Workers — API running as a separate Cloudflare Worker