tRPC + SvelteKit Example Index

Explore several advanced patterns for loading typed data with tRPC in SvelteKit:

Universal Data Loading +page.ts

Uses a universal +page.ts load function with tRPC for typed, end-to-end data fetching on both server (initial load) and client (navigations). Great for dynamic dashboards or user profile pages that need up-to-date, personalized data.

Server-only Data Loading +page.server.ts

Uses a server-only +page.server.ts load function with tRPC's createCaller() for secure, fast data fetching that never runs on the client. Ideal for admin dashboards, analytics, or sensitive data.

SSR Prefetching with TanStack Query +page.ts

Demonstrates SSR prefetching and client-side hydration using TanStack Query and tRPC. Fetches and hydrates data for both initial server load and client navigations. Perfect for real-time dashboards or feeds needing fresh, typed data everywhere.

SSR with initialData Hydration +page.ts

Shows how to use TanStack Query with tRPC for SSR data fetching using the initialData pattern. Data is fetched on the server and passed as initialData to queries for instant hydration and type safety. Great for landing pages or dashboards needing fast, typed data on first load.