using-remote-functions

Create SvelteKit components using Remote Functions for type-safe client-server communication. Use when building components that need to fetch data, submit forms, or execute server commands. Remote Functions work at the component level, not page level.

1. Otwórz plik svelte.config.js w projekcie SvelteKit i dodaj flagę remoteFunctions: true w sekcji kit.experimental. Opcjonalnie włącz async: true w compilerOptions.experimental, aby móc używać await bezpośrednio w komponentach.

2. W swoim komponencie utwórz plik data.remote.ts w tym samym katalogu. W pliku tym zdefiniuj funkcję zdalną — na przykład funkcję query do pobierania danych lub form do obsługi wysyłania formularza. Każda funkcja powinna być eksportowana i zawierać logikę serwera.

3. W komponencie .svelte zaimportuj funkcję zdalną i wywołaj ją jak zwykłą funkcję JavaScript. SvelteKit automatycznie obsługuje komunikację między klientem a serwerem — nie musisz pisać żadnych tras API.

4. Dla formularzy użyj typu form zamiast command — Remote Functions preferują deklaratywne podejście do mutacji danych. Formularz będzie działać nawet bez JavaScript dzięki progresywnej poprawie.

5. Zorganizuj logikę tak, aby jak najmniej kodu było w pliku +page.svelte, a jak najwięcej w data.remote.ts. Strona powinna być czystym renderowaniem — mapowaniem typów na komponenty, podczas gdy serwer buduje ostateczne struktury danych.