Lançado · em melhoria
Framework · Desde 2020
SvelteKit é o framework oficial para apps web com Svelte: roteamento por arquivos, renderização no servidor, carregamento de dados e deploy flexível.
SvelteKit é o framework de aplicações oficial do time do Svelte, apresentado pela primeira vez em 2020 e desenvolvido como código aberto. Ele se apoia no Svelte, que compila os componentes em JavaScript eficiente no momento do build, e acrescenta roteamento, renderização no servidor (SSR), carregamento de dados, tratamento de formulários, build e deploy; o servidor de desenvolvimento e o empacotamento ficam por conta do Vite. A geração atual do Svelte expressa reatividade com runas como $state, $derived, $effect e $props.
Seu ponto forte é permitir escolher a estratégia de renderização em cada página. Conteúdo igual para todos, como posts de blog e documentação, pode ser pré-renderizado no build; páginas personalizadas são renderizadas no servidor, e telas que dependem muito das APIs do navegador podem ser renderizadas só no cliente. As form actions funcionam sem JavaScript e são aprimoradas progressivamente, e basta trocar o adapter para publicar o mesmo código em um servidor Node.js, em hospedagem estática ou em plataformas como Vercel, Netlify e Cloudflare.
Para começar, crie um projeto com npx sv create e siga o tutorial interativo do svelte.dev, primeiro os fundamentos do Svelte e depois o SvelteKit. Materiais antigos costumam mostrar sintaxe e configuração que já mudaram, como export let, $lib e svelte.config.js, então vale estudar pela documentação oficial e pela sintaxe atual de runas.
$state, $derived, $effect e $props deixam a reatividade explícita, e o compilador gera código que atualiza só o que mudou, sem DOM virtual.
A estrutura de pastas de src/routes é a estrutura de URLs; os arquivos +page, +layout, +server e +error definem páginas, layouts, APIs e telas de erro.
Escolha renderização no servidor, no cliente ou pré-renderização para cada página com as opções prerender, ssr e csr.
Busque dados com funções load tipadas automaticamente e altere-os com form actions que funcionam até sem JavaScript.
O desenvolvimento com SvelteKit roda sobre o Node.js. Instale uma versão LTS atual e, em um terminal novo, confira se node e npm mostram suas versões.
node --version && npm --versionUse o sv, a ferramenta oficial de linha de comando, para criar um projeto. Você escolhe o template, o uso de TypeScript e integrações como Prettier, ESLint, Vitest e Playwright.
npx sv create my-appEntre na pasta do projeto, instale as dependências e inicie o servidor de desenvolvimento. O navegador abre http://localhost:5173 e as alterações aparecem assim que você salva.
cd my-app && npm install && npm run dev -- --opensrc/routes/+page.svelte é a página inicial (/). A variável count, criada com a runa $state, atualiza a interface sempre que muda, e a função passada ao atributo onclick a incrementa a cada clique. Para adicionar páginas, crie pastas, por exemplo src/routes/about/+page.svelte.
src/routes/+page.svelte
<script lang="ts">
let count = $state(0);
</script>
<h1>Hello, SvelteKit!</h1>
<button onclick={() => count++}>
Clicked {count} times
</button>
npx sv create my-app && cd my-app && npm install && npm run devSeis capítulos que levam você da instalação aos conceitos essenciais de SvelteKit.
Tire dúvidas, compartilhe experiências e troque opiniões sobre SvelteKit.
Ainda não há discussões. Comece a primeira.
0 comentários
Fazer login · Faça login para deixar um comentário.
Seja o primeiro a comentar.