using-remote-functions

name	using-remote-functions
description	Create SvelteKit components using Remote Functions for type-safe client-server communication. Use when building components that need to fetch data, submit forms, or execute server commands. Remote Functions work at the component level, not page level.

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