execution-model

Control server and client execution boundaries in TanStack Start applications.

Updated May 26, 2026
One-click install
npx skills add https://github.com/Albo-Club/albo-os --skill execution-model-albo-club
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: execution-model
Source: https://github.com/Albo-Club/albo-os/tree/main/.agents/skills/tanstack-start-core/execution-model
Command: npx skills add https://github.com/Albo-Club/albo-os --skill execution-model-albo-club

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? TanStack Start code is isomorphic by default, so secrets leak into client bundles, environment variables read at module scope break on edge runtimes, and hydration mismatches appear when developers misunderstand where code actually runs. ## Core Features & Use Cases - Environment Boundary APIs: Use createServerFn, createServerOnlyFn, createClientOnlyFn, and createIsomorphicFn to control exactly where each function executes. - Client-Only Rendering: Apply the ClientOnly component and useHydrated hook to render browser-dependent UI without hydration mismatches. - Environment Variable Safety: Enforce correct VITE_ prefix usage and per-request process.env reads so secrets never leak and edge runtimes like Cloudflare Workers resolve env correctly. - Use Case: A route loader needs an API secret to fetch data. Wrap the fetch in createServerFn so the secret stays server-side, instead of reading process.env directly in the isomorphic loader where it would leak to the client bundle. ## Quick Start Ask the assistant to refactor a TanStack Start route loader that reads process.env directly so the secret access moves into a createServerFn handler.

Frequently Asked Questions about execution-model

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run server-only code in TanStack Start?

Use createServerFn to define an RPC-style function whose handler executes only on the server; client calls become network requests. For utilities that must never run on the client, use createServerOnlyFn, which throws an error if invoked client-side.

Why is my process.env variable undefined in TanStack Start on Cloudflare Workers?

Edge runtimes like Cloudflare Workers inject environment variables per request, so module-level process.env reads evaluate to undefined. Read env inside a createServerFn .handler() or another per-request function instead of at module scope.

What is the difference between createServerFn and createServerOnlyFn?

createServerFn creates an RPC boundary: client calls become network requests to the server. createServerOnlyFn wraps a utility that executes directly on the server but throws an error if called from the client, with no network fallback.

Can I use VITE_ prefixed variables for API secrets in TanStack Start?

No. VITE_ prefixed variables are inlined into the client bundle and publicly visible. Keep server secrets unprefixed and access them via process.env inside server functions; reserve VITE_ for public client values like app names.

How do I fix hydration mismatch errors in TanStack Start?

Render browser-dependent content only after hydration using the ClientOnly component with a fallback, or gate logic with the useHydrated hook, which returns false during SSR and true after hydration. Avoid rendering values like new Date() directly.

When should I use createIsomorphicFn instead of createServerFn?

Use createIsomorphicFn when one symbol needs different implementations per environment, defined via .server() and .client() branches. Use createServerFn when the logic must only ever execute on the server, such as database access or secret usage.