1.1 — O que é Svelte e por que aprender

Conheça o framework que mais cresce no ecossistema JavaScript e entenda por que ele é diferente de tudo que você já viu.

Objetivos da Aula

• Entender o que é o Svelte e sua proposta
• Conhecer a diferença entre compilador e runtime
• Saber a relação entre Svelte e SvelteKit
• Conhecer as estrategias de renderizacao da web (SSR, CSR, SSG e outras)
• Entender por que Svelte é ideal para quem está começando

O que é Svelte?

Svelte é um framework JavaScript para construir interfaces de usuário. Mas com uma diferença fundamental: enquanto frameworks como React e Vue fazem a maior parte do trabalho no navegador do usuário, o Svelte faz esse trabalho antes, no momento em que você gera o build do projeto.

Na prática, isso significa que o Svelte é um compilador. Ele transforma seus componentes em JavaScript puro e otimizado, sem carregar nenhuma biblioteca extra no navegador.

O resultado?

Aplicações Svelte são menores, mais rápidas e mais simples de escrever.

Svelte vs Outros Frameworks

Se você já ouviu falar de React ou Vue, a comparação vai ajudar a entender a proposta do Svelte.

Svelte vs SvelteKit

Essa e uma duvida muito comum entre iniciantes. Vamos esclarecer:

Svelte e o compilador de componentes. Com ele voce cria botoes, formularios, cards, listas — tudo que e visual e interativo.

SvelteKit e o framework fullstack construido em cima do Svelte. Ele adiciona:

• Roteamento baseado em arquivos (cada arquivo vira uma pagina)
• Renderizacao no servidor (SSR)
• Carregamento de dados
• API routes
• Build e deploy otimizados

Como a web renderiza: SSR, CSR e alem

Antes de seguir, vale entender um conceito fundamental que voce vai encontrar o tempo todo: como o HTML chega ate o navegador do usuario.

Server-Side Rendering (SSR)

No SSR, o servidor gera o HTML completo da pagina e envia pronto para o navegador. E assim que a web funcionou desde o inicio — PHP, Ruby on Rails, Django e outros frameworks tradicionais fazem exatamente isso.

Vantagens: o conteudo aparece rapido na tela e buscadores como o Google conseguem ler a pagina facilmente (bom para SEO).

Desvantagem: cada clique em um link exige uma nova ida ao servidor, o que pode deixar a navegacao mais lenta.

Client-Side Rendering (CSR)

No CSR, o servidor envia um HTML quase vazio junto com um arquivo JavaScript grande. O navegador e quem faz todo o trabalho — executa o JavaScript, busca os dados e monta a interface na tela.

Vantagens: depois do carregamento inicial, a navegacao entre paginas e muito rapida (sem recarregar a pagina inteira). Excelente para dashboards e aplicacoes interativas.

Desvantagem: o primeiro carregamento pode ser lento (tela em branco enquanto o JavaScript executa) e buscadores tem dificuldade para indexar o conteudo.

Outras estrategias de renderizacao

SSR e CSR nao sao as unicas opcoes. A web moderna oferece mais abordagens:

E o SvelteKit nisso tudo?

O SvelteKit permite usar todas essas estrategias — e ainda mistura-las no mesmo projeto. Uma pagina pode ser SSR, outra SSG, outra CSR. Voce escolhe por rota, de acordo com a necessidade.

src/routes/
├── blog/
│   └── +page.svelte
│   → SSG (conteudo estatico, gerado no build)
├── dashboard/
│   └── +page.svelte
│   → CSR (app interativa, so no navegador)
└── produtos/
    └── +page.svelte
    → SSR (dados frescos do servidor a cada acesso)

Por que aprender Svelte?

Para iniciantes

Se voce esta comecando no mundo do desenvolvimento web, Svelte tem uma vantagem enorme: a sintaxe e quase identica a HTML, CSS e JavaScript puros. Nao precisa aprender JSX, hooks, ou conceitos complexos antes de construir algo funcional.

<!-- Isso e um componente Svelte completo -->
<script>
  let nome = 'mundo'
</script>

<h1>Ola, {nome}!</h1>

<style>
  h1 {
    color: #ff3e00;
  }
</style>

Olhe o codigo acima. Se voce conhece o basico de HTML, CSS e JavaScript, voce ja entende quase tudo. Isso e Svelte.

Para desenvolvedores experientes

Se voce ja trabalha com React ou Vue, o Svelte vai parecer um alivio:

• Menos boilerplate
• Reatividade por atribuicao simples (sem useState ou ref())
• CSS com escopo automatico (sem CSS Modules ou styled-components)
• Bundles significativamente menores
• Performance excepcional sem esforco extra

O ecossistema

Svelte tem um ecossistema maduro e em crescimento rapido:

• SvelteKit — framework fullstack oficial
• Svelte 5 — versao mais recente com Runes (novo modelo de reatividade)
• sv CLI — ferramenta unificada para criar e gerenciar projetos
• Comunidade ativa e acolhedora

O que vamos construir neste curso?

Ao longo do curso, voce vai aprender Svelte e SvelteKit construindo projetos praticos. Mas primeiro, precisamos configurar nosso ambiente. Na proxima aula, voce vai criar seu primeiro projeto Svelte usando a ferramenta oficial sv.

Resumo

Pre-requisitos para a proxima aula

Antes de continuar, certifique-se de que voce tem instalado:

# Verifique o Node.js (versao 18 ou superior)
node --version

# Verifique o npm
npm --version

Proxima aula: 1.2 — Criando seu Projeto com sv create