using-remote-functions

Remote Functions to umiejętność dla SvelteKit, która pozwala tworzyć komponenty z typobezpieczną komunikacją między klientem a serwerem. Zamiast budować tradycyjne API, definiujesz funkcje po stronie serwera i wywołujesz je bezpośrednio z komponentów — z pełnym wsparciem TypeScript. Idealne do pobierania danych, obsługi formularzy i wykonywania poleceń serwera na poziomie komponentu, a nie strony. Wymaga włączenia flag eksperymentalnych w konfiguracji SvelteKit.

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.