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