Hospedagem estática para SvelteKit

O SvelteKit consegue pré-renderizar todas as páginas no build e escrever o resultado como arquivos simples com o @sveltejs/adapter-static. O Lobsite hospeda esses arquivos. Faça o build com o adapter estático, rode npx lobsite, e o site fica no ar num endereço *.lobsite.app com HTTPS. Esta página trata de sites totalmente pré-renderizados. Rotas de servidor e form actions precisam de uma hospedagem que rode o SvelteKit num servidor.

Como funciona

1. Troque para o adapter estático e pré-renderize todas as páginas (veja abaixo); depois rode npm run build. O site vai para build/.
2. Rode npx lobsite no projeto. Ele publica build/, não static/ nem .svelte-kit/. O primeiro deploy não precisa de conta e dura 6 horas.
3. Mantenha-o com o link de resgate, numa conta gratuita. Depois disso, npm run build && npx lobsite atualiza o mesmo endereço.

adapter-static e pré-renderização

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

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

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

• prerender = true no layout raiz faz cada página renderizar no build. Se uma página não puder ser pré-renderizada, o build falha e diz qual, então nada quebrado é publicado.
• fallback: "200.html" é para páginas que não podem ser pré-renderizadas: o SvelteKit escreve um shell 200.html, e o Lobsite o serve para qualquer caminho que não seja um arquivo, então essas páginas renderizam no navegador. Páginas pré-renderizadas continuam sendo melhores para buscadores e para o primeiro carregamento.
• trailingSlash pode ficar no padrão: /about é escrito como about.html e servido em /about.

O que roda no build, e o que não pode

Funções load, inclusive as de +page.server.js, rodam durante o build quando uma página é pré-renderizada, então dados de arquivos ou APIs ficam embutidos no HTML. Rotas dinâmicas são encontradas seguindo os links das suas páginas; liste em prerender.entries as que não têm link. O que não funciona sem servidor: form actions, endpoints +server.js que não sejam GET pré-renderizados, hooks que rodam a cada requisição e leitura de cookies. Para um formulário de contato, envie para /_lobsite/forms/contact em vez de uma form action; veja formulários.

Hospedagens para SvelteKit comparadas

Se o seu app renderiza páginas sob demanda, use um adapter para uma hospedagem que o rode. Se todas as páginas podem ser pré-renderizadas, como em sites de marketing, blogs e documentação, o Lobsite o hospeda com um comando e envia só os arquivos que cada build mudou.

Perguntas frequentes

Qual adapter do SvelteKit devo usar no Lobsite?

@sveltejs/adapter-static, com todas as páginas pré-renderizadas. O adapter-auto e os adapters de plataforma fazem build para servidores e funções, que o Lobsite não roda.

Uma SPA em SvelteKit com página de fallback roda aqui?

Sim. Defina adapter({ fallback: "200.html" }): o Lobsite serve 200.html com status 200 para qualquer caminho que não seja um arquivo, e o roteador do SvelteKit renderiza a página no navegador. Páginas pré-renderizadas continuam sendo servidas como estão.

Por que meu build do SvelteKit falhou com um erro de pré-renderização?

Uma página não conseguiu renderizar no build, muitas vezes porque lê url.searchParams, cookies ou uma form action. Leve esse trabalho para o navegador, ou para uma função load que só use dados disponíveis no build.

As transições de página do SvelteKit continuam funcionando depois da pré-renderização?

Sim. As páginas pré-renderizadas carregam o cliente do SvelteKit, que assume a navegação depois da primeira página, então os links continuam trocando de página sem recarregar tudo.