SKILL.md
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](REMOTE-FIRST.md) for patterns and examples.
Four Types of Remote Functions
| Type | Purpose | Reference |
|---|---|---|
query |
Read dynamic data | [QUERY.md](QUERY.md) |
form |
Handle form submissions | [FORM.md](FORM.md) |
command |
Programmatic mutations, avoid if possible. Always prefer form |
[COMMAND.md](COMMAND.md) |
prerender |
Static data at build time | (not covered) |
Combining Functions
For refreshing queries after mutations, see [SINGLE-FLIGHT.md](SINGLE-FLIGHT.md).
Code Templates
For starter code blocks, see [TEMPLATES.md](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