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