955: SvelteKit has solved data loading

What It Covers

SvelteKit's new remote functions feature provides a complete RPC solution for data loading and mutations, combining type-safe server-client communication with progressive enhancement, automatic validation, and seamless form handling without traditional API endpoints.

Key Questions Answered

• •Remote Function Architecture: Files named `.remote.ts` run exclusively on server side and can be imported directly into client components, eliminating API routes while maintaining full TypeScript type safety through standard schema validation across the entire stack.
• •Query Batching Strategy: Use `query.batch` to consolidate multiple data requests from loops into single network calls and database queries. Example: fetching weather for ten cities sends one batched request instead of ten individual calls, reducing both network overhead and render updates.
• •Form Function Implementation: Spread remote form functions onto HTML forms to get progressive enhancement, automatic client-side validation, error messages, and field state management without writing controlled inputs or state updaters. Forms work with or without JavaScript enabled.
• •Data Refresh Optimization: Use `.set()` method instead of `.refresh()` when mutations return updated data, avoiding unnecessary database queries by directly inserting new data into existing queries. Combine with optimistic UI patterns for instant perceived performance improvements.