Using Remote Functions

Remote Functions are a SvelteKit feature for type-safe client-server communication. They run on the server but can be called from any component.

Key Concepts

•Component-level: Unlike load functions, Remote Functions work in any component
•Type-safe: Full TypeScript support between client and server
•Progressive enhancement: Forms work without JavaScript
•Experimental: Requires config flags (see below)

Configuration

Add to svelte.config.js:

const config = {
	kit: {
		experimental: {
			remoteFunctions: true
		}
	},
	compilerOptions: {
		experimental: {
			async: true // Optional: enables await in components
		}
	}
}

Remote-First Architecture

Put as little as possible in +page.svelte, as much as possible in data.remote.ts.

Build final data structures server-side. Pages should be pure renderers that map types to components.

See REMOTE-FIRST.md for patterns and examples.

Four Types of Remote Functions

Type	Purpose	Reference
`query`	Read dynamic data	QUERY.md
`form`	Handle form submissions	FORM.md
`command`	Programmatic mutations, avoid if possible. Always prefer `form`	COMMAND.md
`prerender`	Static data at build time	(not covered)

Combining Functions

For refreshing queries after mutations, see SINGLE-FLIGHT.md.

Code Templates

For starter code blocks, see TEMPLATES.md.

When to Use Remote Functions vs Load Functions

Use Remote Functions when:

•Data is needed at the component level, not page level
•You want colocated data fetching with the component
•Building reusable components with their own data needs

Use Load Functions when:

•Never