Statyczny hosting SvelteKit

SvelteKit potrafi wyrenderować każdą stronę podczas builda i zapisać wynik jako zwykłe pliki dzięki @sveltejs/adapter-static. Lobsite hostuje te pliki. Zbuduj z adapterem statycznym, uruchom npx lobsite, a strona będzie działać pod adresem *.lobsite.app z HTTPS. Ta strona dotyczy witryn w pełni prerenderowanych. Trasy serwerowe i form actions wymagają hostingu, który uruchamia SvelteKit na serwerze.

Jak to działa

1. Przełącz się na adapter statyczny i prerenderuj każdą stronę (patrz niżej), potem uruchom npm run build. Strona trafi do build/.
2. Uruchom npx lobsite w projekcie. Wdraża build/, a nie static/ ani .svelte-kit/. Pierwsze wdrożenie nie wymaga konta i trwa 6 godzin.
3. Zachowaj ją linkiem do przejęcia, na darmowym koncie. Potem npm run build && npx lobsite aktualizuje ten sam adres.

adapter-static i prerendering

// svelte.config.js
import adapter from "@sveltejs/adapter-static";

export default {
  kit: { adapter: adapter() },
};

// src/routes/+layout.js
export const prerender = true;

• prerender = true w głównym layoucie sprawia, że każda strona renderuje się podczas builda. Jeśli strony nie da się prerenderować, build się nie powiedzie i wskaże którą, więc nic zepsutego nie zostanie wdrożone.
• fallback: "200.html" jest dla stron, których nie da się prerenderować: SvelteKit zapisuje powłokę 200.html, a Lobsite serwuje ją dla każdej ścieżki, która nie jest plikiem, więc te strony renderują się w przeglądarce. Strony prerenderowane są i tak lepsze dla wyszukiwarek i pierwszego ładowania.
• trailingSlash może zostać domyślny: /about zapisuje się jako about.html i jest serwowane pod /about.

Co działa podczas builda, a co nie może

Funkcje load, także te w +page.server.js, uruchamiają się podczas builda, gdy strona jest prerenderowana, więc dane z plików lub API trafiają na stałe do HTML. Trasy dynamiczne są znajdowane przez podążanie za linkami z Twoich stron; te, do których nic nie linkuje, wpisz w prerender.entries. Bez serwera nie zadziałają: form actions, endpointy +server.js poza prerenderowanymi GET, hooki uruchamiane przy każdym żądaniu i odczyt ciasteczek. Formularz kontaktowy wyślij do /_lobsite/forms/contact zamiast do form action; zobacz formularze.

Porównanie hostingów dla SvelteKit

Jeśli Twoja aplikacja renderuje strony na żądanie, użyj adaptera dla hostingu, który ją uruchomi. Jeśli każdą stronę da się prerenderować, jak w stronach marketingowych, blogach i dokumentacji, Lobsite hostuje ją jednym poleceniem i wysyła tylko pliki zmienione w każdym buildzie.

Najczęstsze pytania

Którego adaptera SvelteKit użyć z Lobsite?

@sveltejs/adapter-static, z prerenderowaną każdą stroną. adapter-auto i adaptery platform budują pod serwery i funkcje, których Lobsite nie uruchamia.

Czy działa tu SPA w SvelteKit ze stroną fallback?

Tak. Ustaw adapter({ fallback: "200.html" }): Lobsite serwuje 200.html ze statusem 200 dla każdej ścieżki, która nie jest plikiem, a router SvelteKit renderuje stronę w przeglądarce. Strony prerenderowane nadal są serwowane bez zmian.

Dlaczego build SvelteKit nie powiódł się z błędem prerenderingu?

Strona nie mogła się wyrenderować podczas builda, często dlatego, że odczytuje url.searchParams, ciasteczka lub form action. Przenieś tę pracę do przeglądarki albo do funkcji load, która używa tylko danych dostępnych podczas builda.

Czy przejścia między stronami w SvelteKit działają po prerenderingu?

Tak. Prerenderowane strony ładują klienta SvelteKit, który po pierwszej stronie przejmuje nawigację, więc linki nadal zmieniają strony bez pełnego przeładowania.