SvelteKit Remote Functions

What problem does it solve?

Remote Functions are a tool for type-safe communication between client and server. They can be called anywhere in your app, but always run on the server, meaning they can safely access server-only modules containing things like environment variables and database clients.

Combined with Svelte's experimental support for await in components, it allows you to load and manipulate data directly inside your components.

This feature is currently experimental, meaning it is likely to contain bugs and is subject to change without notice. You must opt in by adding the kit.experimental.remoteFunctions option in your svelte.config.js and optionally, the compilerOptions.experimental.async option to use await in components:

• You can enable remote functions in svelte.config.js to opt in for this feature.
• Optionally enable compilerOptions.experimental.async to use await in components.

Practical takeaway: use remote functions to fetch data or submit actions from the client while keeping server-side security intact.

Quick intuition: think of remote functions as a type-safe bridge between client calls and server-side logic.

For more details, refer to the official SvelteKit Remote Functions docs.

Core Features & Use Cases

• Four flavors: query, form, command and prerender provide typed read, write, and prerender capabilities.
• Server-side execution: Functions run on the server and can access server-only modules and environment variables.
• Frontend integration: Use in SvelteKit components to fetch data or submit forms with typed inputs/outputs.

Quick Start

1. Enable remote functions in svelte.config.js (e.g., set kit.experimental.remoteFunctions to true).
2. Create a remote file (e.g., src/routes/blog/data.remote.ts) and export a function using query, form, or prerender.
3. Call the remote function from a component using the exported function and handle the response with await or reactive stores.