O que é o SvelteKit 3

O SvelteKit e o framework oficial para construir aplicações web com Svelte. Se o Svelte e o compilador que transforma seus componentes em JavaScript puro, o SvelteKit e a camada que organiza rotas, servidor, build e deploy. Pense nele como o Next.js do ecossistema Svelte.

A versão 3 foi lançada em outubro de 2026 e traz mudanças significativas na API de carregamento de dados, suporte aprimorado a streaming de servidor, melhorias no sistema de roteamento e ganhos de performance no build. Não e uma reescrita completa, mas e uma evolução clara em relação ao SvelteKit 2.

Para desenvolvedores brasileiros que já trabalham com React/Next.js ou Vue/Nuxt, o SvelteKit 3 e uma alternativa solida e cada vez mais madura para projetos novos e migração de projetos existentes.

Como funciona

O SvelteKit usa um sistema de roteamento baseado em arquivos. Cada pasta dentro de src/routes vira uma rota da sua aplicação. Um arquivo +page.svelte define a página, +page.server.ts define o carregamento de dados no servidor, e +layout.svelte define o layout compartilhado entre páginas.

No SvelteKit 3, a função load recebeu atualizações importantes. Agora e possível usar streaming parcial de dados diretamente: você retorna uma Promise ainda não resolvida da função load e o framework renderiza o shell da página enquanto o dado e carregado, sem precisar de componentes Suspense ou workarounds manuais.

O build usa o Vite internamente e gera artefatos otimizados automaticamente. O adaptador escolhido (Node, Cloudflare, Vercel, Netlify, etc.) define como o output final e estruturado para o ambiente de deploy. No SvelteKit 3, os adaptadores foram atualizados para tirar vantagem das novas APIs de cada plataforma.

Principais recursos do SvelteKit 3

A versão 3 consolida e expande o conjunto de funcionalidades que tornaram o SvelteKit popular. Os destaques são:

  • Streaming nativo na função load: retorne Promises sem resolver e o servidor transmite o HTML progressivamente. Melhora muito o Time to First Byte em páginas com dados lentos.
  • Roteamento com grupos: você pode agrupar rotas em pastas com parênteses (ex: (auth)) sem afetar a URL. Útil para aplicar layouts diferentes a conjuntos de páginas.
  • Form actions aprimoradas: o sistema de actions do SvelteKit 3 ficou mais expressivo, com suporte a múltiplas actions por página e melhor integração com Progressive Enhancement.
  • TypeScript primeiro: todas as APIs públicas do SvelteKit 3 tem tipos gerados automaticamente pelo framework com base nas suas rotas, eliminando boilerplate de tipagem manual.
  • Hot Module Replacement mais rápido: o tempo de atualização em desenvolvimento caiu significativamente em projetos grandes, gracias a otimizações no pipeline Vite.

Além disso, o SvelteKit 3 melhora o suporte a shallow routing (navegar sem recarregar a página preservando estado) e adiciona hooks de ciclo de vida mais granulares para controlar o que acontece antes e depois de cada navegação.

Como começar: instalação passo a passo

Para criar um projeto novo com SvelteKit 3, você precisa do Node.js 18 ou superior instalado. O processo e direto:

npm create svelte@latest meu-projeto
cd meu-projeto
npm install
npm run dev

Durante o create svelte, você escolhe o template (skeleton, demo app ou biblioteca), se quer TypeScript, ESLint e Prettier. Para projetos novos, recomendo TypeScript + ESLint desde o inicio.

💡
Dica

Se você usa VS Code, instale a extensão oficial Svelte for VS Code. Ela adiciona syntax highlighting, autocompletar e verificação de tipos em arquivos .svelte com TypeScript.

Para migrar um projeto SvelteKit 2 para a versão 3, o time do Svelte disponibilizou um guia de migração detalhado no site oficial. A maioria das mudanças de API e automatizavel com o codemod oficial:

npx svelte-migrate@latest sveltekit-3

O codemod cobre a maioria dos casos. Mudanças manuais são necessárias apenas em usos avançados da função load e em alguns hooks customizados.

Exemplo prático: página com streaming de dados

Imagine uma página de perfil de usuário que precisa carregar dados do banco (rápido) e uma lista de recomendações de um serviço externo (lento). Com SvelteKit 3, você pode transmitir os dados do banco imediatamente e fazer o streaming das recomendações em paralelo:

// src/routes/perfil/[id]/+page.server.ts
export async function load({ params }) {
  const usuário = await buscarUsuario(params.id); // rápido

  return {
    usuário,
    recomendações: buscarRecomendações(params.id) // Promise sem await
  };
}

No componente Svelte, você usa a diretiva await dentro do template para renderizar o conteúdo quando a Promise resolver:


<script>
  export let data;
</script>

<h1>{data.usuário.nome}</h1>

{#await data.recomendações}
  <p>Carregando recomendações...</p>
{:then lista}
  {#each lista as item}
    <div>{item.titulo}</div>
  {/each}
{/await}

O resultado e uma página que carrega instantaneamente com os dados do usuário e exibe um skeleton para as recomendações enquanto elas chegam, sem JavaScript extra ou bibliotecas de terceiros.

Comparação com alternativas

O mercado de meta-frameworks JavaScript esta mais competitivo do que nunca. SvelteKit 3 compete diretamente com Next.js 15, Nuxt 4, Remix e Astro. Cada um tem seu ponto forte:

  • Next.js: ecossistema gigante, mais vagas de emprego, React Server Components. Contra: complexidade crescente, bundle maior.
  • Nuxt 4: melhor escolha se você já conhece Vue. API muito polida. Contra: Svelte tem melhor performance de runtime.
  • Remix: foco em web standards e Progressive Enhancement. Próximo ao SvelteKit em filosofia. Contra: comunidade menor no Brasil.
  • Astro: ideal para sites com menos interatividade (blogs, landing pages). Contra: não substitui SvelteKit para apps com muito estado cliente.
⚠️
Atenção

Se o seu time já usa React e tem familiaridade com Next.js, a curva de aprendizado do SvelteKit pode não compensar para projetos com prazo curto. Para projetos novos sem restrição de stack, vale muito a experimentação.

O ponto forte único do SvelteKit e a sintaxe do Svelte em si: sem Virtual DOM, sem hooks com regras complexas, componentes que compilam para JavaScript puro. O resultado e um DX (Developer Experience) muito mais simples para quem esta começando, e uma performance de runtime superior para quem já e experiente.

Pontos positivos e limitações

O SvelteKit 3 e um framework maduro com pontos fortes claros, mas também tem limitações que você precisa conhecer antes de adotar:

Pontos positivos: sintaxe do Svelte e simples e expressiva, sem boilerplate; build rápido via Vite; streaming nativo sem bibliotecas extras; TypeScript de primeira classe; documentação oficial excelente e traduzida parcialmente.

Limitações reais: o ecossistema de componentes (bibliotecas UI, plugins) ainda e menor que React. Menos vagas de emprego no Brasil explicitamente pedindo Svelte. Alguns recursos avançados (como a integração com React Server Components) simplesmente não existem aqui, porque o Svelte tem uma filosofia diferente.

🔴
Cuidado

Não confunda Svelte (o compilador de componentes) com SvelteKit (o framework full-stack). Você pode usar Svelte sem SvelteKit, mas a maioria dos projetos novos usa os dois juntos. Certifique-se de estar lendo a documentação correta.

Casos de uso reais

O SvelteKit 3 e uma escolha excelente em vários cenários:

  • Startups e MVPs: a velocidade de desenvolvimento e alta, o bundle final e pequeno, e você pode hospedar no Cloudflare Workers ou Vercel no plano gratuito.
  • Dashboards internos: a reatividade nativa do Svelte facilita muito a construção de interfaces com dados em tempo real sem bibliotecas extras de estado.
  • Blogs e sites de conteúdo com alguma interatividade: SvelteKit faz SSG, SSR e híbrido no mesmo projeto, o que da flexibilidade para otimizar cada rota separadamente.
  • APIs full-stack: os endpoints de servidor (+server.ts) permitem construir uma API REST ou RPC diretamente no mesmo projeto, sem precisar de um backend separado para casos simples.

Dicas e boas práticas

💡
Dica

Use $app/stores para acessar informações de navegação (página atual, parâmetros, URL) de qualquer componente sem prop drilling. Muito mais simples que Context API do React.

🚀
Pro tip

Coloque lógica pesada de validação e autorização nos hooks de servidor (src/hooks.server.ts). Eles rodam antes de qualquer função load e são o lugar certo para checar sessão, rate limiting e logging de requisições.

⚠️
Atenção

Variáveis de ambiente com prefixo PUBLIC_ são expostas ao cliente. Nunca coloque chaves de API ou segredos com esse prefixo. Use variáveis sem prefixo para dados que devem ficar só no servidor.

💡
Dica

O SvelteKit tem suporte nativo a pre-rendering. Adicione export const prerender = true em qualquer +page.ts para gerar aquela rota como HTML estático no build, sem precisar de SSR em produção.

Vale a pena?

Para quem esta começando um projeto novo sem restrições de stack, sim, vale muito a pena experimentar o SvelteKit 3. A curva de aprendizado do Svelte e suave, o DX e excelente e a performance do produto final e superior a maioria dos frameworks concorrentes.

Para quem tem um projeto em produção com Next.js ou Nuxt, a migração provavelmente não compensa a não ser que você tenha problemas específicos de performance ou complexidade que o SvelteKit resolve melhor. O ecossistema ainda e menor e a disponibilidade de devs experientes em Svelte no mercado brasileiro e limitada.

O próximo passo sugerido: crie um projeto de teste com npm create svelte@latest, implemente uma página simples com carregamento de dados e veja como a experiência de desenvolvimento se compara com o que você usa hoje. Trinta minutos de experimento valem mais do que qualquer benchmark.