using-remote-functions

Type-safe data fetching in SvelteKit components is enabled through remote functions that colocate data logic directly within your components. This approach uses queries to read data while maintaining TypeScript consistency between client and server code.

Forms in SvelteKit can be submitted via remote functions with built-in progressive enhancement, ensuring they remain functional even when JavaScript is disabled. This allows direct server-side processing from the component scope.

Executing server-side commands from a SvelteKit component is handled through programmatic mutations called commands. This remote-first architecture supports efficient SSR and client-side rendering without leaving the component's scope.

TypeScript is fully supported for client-server communication in SvelteKit via remote functions. It ensures type consistency across your data fetching, form submissions, and command executions, preventing runtime type mismatches.

Colocating data fetching logic with SvelteKit components organizes related server queries and mutations within the component's scope. This simplifies building dynamic features like product cards that independently fetch details and trigger cart additions.

Remote functions should be used when you need component-level data autonomy, such as individual product cards fetching their own details. They provide a remote-first architecture for granular queries, forms, and commands beyond traditional page-level loading.