Hosting statico per SvelteKit

SvelteKit può prerenderizzare ogni pagina in fase di build e scrivere il risultato come file semplici con @sveltejs/adapter-static. Lobsite ospita quei file. Fai la build con l'adapter statico, esegui npx lobsite, e il sito è online a un indirizzo *.lobsite.app con HTTPS. Questa pagina riguarda i siti interamente prerenderizzati. Le server route e le form action richiedono un hosting che esegua SvelteKit su un server.

Come funziona

1. Passa all'adapter statico e prerenderizza ogni pagina (vedi sotto), poi esegui npm run build. Il sito finisce in build/.
2. Esegui npx lobsite nel progetto. Pubblica build/, non static/ né .svelte-kit/. Il primo deploy non richiede account e dura 6 ore.
3. Tienilo con il link per rivendicarlo, in un account gratuito. Da lì in poi, npm run build && npx lobsite aggiorna lo stesso indirizzo.

adapter-static e 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 nel layout radice fa sì che ogni pagina venga renderizzata in fase di build. Se una pagina non si può prerenderizzare, la build fallisce e ti dice quale, così non viene pubblicato nulla di rotto.
• fallback: "200.html" serve per le pagine che non si possono prerenderizzare: SvelteKit scrive una shell 200.html e Lobsite la serve per ogni percorso che non è un file, così quelle pagine vengono renderizzate nel browser. Le pagine prerenderizzate restano comunque migliori per i motori di ricerca e il primo caricamento.
• trailingSlash può restare al valore predefinito: /about viene scritto come about.html e servito a /about.

Cosa gira in fase di build e cosa non può funzionare

Le funzioni load, comprese quelle in +page.server.js, girano durante la build quando una pagina è prerenderizzata, quindi i dati da file o API finiscono direttamente nell'HTML. Le route dinamiche vengono trovate seguendo i link delle tue pagine; elenca in prerender.entries quelle non collegate. Cosa non può funzionare senza un server: form action, endpoint +server.js diversi dai GET prerenderizzati, hook che girano a ogni richiesta e lettura dei cookie. Per un modulo di contatto, invialo a /_lobsite/forms/contact invece che a una form action; vedi moduli.

Hosting per SvelteKit a confronto

Se la tua app renderizza le pagine su richiesta, usa un adapter per un hosting che la esegua. Se ogni pagina si può prerenderizzare, come per siti di marketing, blog e documentazione, Lobsite la ospita con un comando e carica solo i file cambiati a ogni build.

Domande frequenti

Quale adapter di SvelteKit dovrei usare per Lobsite?

@sveltejs/adapter-static, con ogni pagina prerenderizzata. adapter-auto e gli adapter delle piattaforme fanno la build per server e funzioni, che Lobsite non esegue.

Una SPA SvelteKit con pagina di fallback può girare qui?

Sì. Imposta adapter({ fallback: "200.html" }): Lobsite serve 200.html con stato 200 per ogni percorso che non è un file, e il router di SvelteKit renderizza la pagina nel browser. Le pagine prerenderizzate vengono comunque servite così come sono.

Perché la mia build SvelteKit è fallita con un errore di prerendering?

Una pagina non è riuscita a renderizzarsi in fase di build, spesso perché legge url.searchParams, i cookie o una form action. Sposta quel lavoro nel browser, o in una funzione load che usa solo dati disponibili in fase di build.

Le transizioni di pagina di SvelteKit funzionano ancora dopo il prerendering?

Sì. Le pagine prerenderizzate caricano il client di SvelteKit, che prende in mano la navigazione dopo la prima pagina, quindi i link cambiano pagina senza ricaricare tutto.