Catmint Examples@catmint/adapter-vercel

Server Functions

createServerFn creates functions that run on the server but can be called from both server and client components. On the server they execute directly. On the client, Catmint transforms the call into an RPC fetch() request.

Called from a Server Component

The server function was called directly during SSR — no HTTP request, just a function call:

time: 2026-04-05T12:26:31.552Z
pid: 4
node: v22.22.0

Called from a Client Component

The same server functions can be called from a client component. The Vite plugin rewrites the .fn.ts import into a fetch() stub pointing to /__catmint/fn/....

getServerTime() — via RPC

greetUser({ name }) — via RPC

Error Handling Demos

Error Handling

By default, errors thrown in server functions are sanitized before reaching the client — the real message is logged server-side only. To intentionally expose an error to the client, throw or return a ClientSafeError from catmint/server.

On the client, both cases arrive as a ServerFnError from catmint/error with typed statusCode and data properties. The throw/return semantics are preserved: a thrown ClientSafeError becomes a thrown ServerFnError; a returned one becomes the return value.

Try each button above to see the difference between client-safe and sanitized errors.

How It Works

  • Define server functions in *.fn.ts files using createServerFn()
  • Server components call them directly — zero overhead
  • Client components import the same function — Vite rewrites it to an RPC fetch stub
  • Input validation is supported via Standard Schema (Zod, Valibot, etc.) or plain functions
  • Methods: GET, POST, PUT, DELETE (default: POST)