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