Svelte 5 e SvelteKit: uma loja leve e rápida no celular

Este guia mostra como o Svelte 5 e o SvelteKit deixam a sua loja on-line leve no celular do cliente. Você vai ver o que essa escolha economiza, o que ela entrega ao robô do Google e quando ela vale a pena.

Pense numa loja de artigos de papelaria com milhares de itens. A tela precisa de filtro, variação de produto, carrinho, cupom e frete. E precisa abrir rápido num celular comum, numa conexão instável. Esse cenário acompanha o guia até o fim.

Cada pedaço de programa enviado ao celular atrasa a primeira abertura da página. Isso custa venda e custa presença na busca. O Svelte 5 ataca esse ponto: ele resolve na hora de gerar o site o que os outros deixam para o celular resolver.

A loja se monta com três peças: as runes do Svelte 5, o catálogo montado no servidor e os formulários que funcionam sem depender do celular. Juntas, elas melhoram a velocidade da página e a chance de a sua loja ser citada pela IA.

Por que isso deixa a sua loja mais rápida?

Porque o celular do seu cliente recebe menos código e trabalha menos. Os outros programas mandam junto um motor que, a cada mudança, compara a tela inteira para descobrir o que mudou.

O Svelte faz essa conta antes, na hora de gerar o site. Ele já sabe onde o valor muda e escreve a instrução exata para trocar só aquele pedaço da tela.

Na prática, o pacote que chega ao celular fica menor e o aparelho fica mais livre. Numa vitrine com muitos produtos, isso aparece nos dois números de velocidade que o Google usa como sinal de qualidade. São o tempo até a página aparecer e o tempo de resposta ao toque.

Um catálogo que abre rápido e responde ao toque sem travar vira sinal de qualidade. A busca do Google e os assistentes de IA usam esse sinal para decidir se vale a pena guardar e citar a sua loja.

O que são as runes e para que elas servem?

São palavras do próprio Svelte que começam com cifrão e dizem o que muda na tela. O $state guarda um valor que muda, o $derived calcula outro a partir dele, e o $props recebe o que vem de fora. Nada disso precisa ser importado.

Como fica um item de carrinho com quantidade e subtotal?

O exemplo abaixo é um item de carrinho. O $state guarda a quantidade, o $derived recalcula o subtotal a cada mudança dela, e o $props recebe o nome e o preço do produto.

<script lang="ts">
  let { nome, precoUnitario } = $props();

  let quantidade = $state(1);
  let subtotal = $derived(quantidade * precoUnitario);
</script>

<div class="item">
  <span>{nome}</span>
  <button onclick={() => quantidade = Math.max(1, quantidade - 1)}>-</button>
  <strong>{quantidade}</strong>
  <button onclick={() => quantidade++}>+</button>
  <span>Subtotal: R$ {subtotal.toFixed(2)}</span>
</div>

Repare em dois detalhes do Svelte 5. O clique se escreve como um atributo simples, onclick={...}. E o subtotal dispensa qualquer aviso de que depende da quantidade, porque o $derived percebe isso sozinho ao ler o valor. Quando a quantidade muda, só o subtotal é repintado.

Como fica o filtro de produtos da vitrine?

Catálogo sem busca rápida esconde o próprio estoque. Aqui o $state guarda o que a pessoa digitou, o bind:value liga a caixa de busca a esse valor, e o $derived monta a lista filtrada. Para uma conta maior, existe o $derived.by.

<script lang="ts">
  let { produtos } = $props();

  let termo = $state('');

  let filtrados = $derived.by(() => {
    const q = termo.trim().toLowerCase();
    if (!q) return produtos;
    return produtos.filter((p) => p.nome.toLowerCase().includes(q));
  });
</script>

<input type="search" placeholder="Buscar produto" bind:value={termo} />

<ul>
  {#each filtrados as produto}
    <li>{produto.nome} — R$ {produto.preco.toFixed(2)}</li>
  {/each}
</ul>

A cada tecla, o valor digitado muda, a lista filtrada é recalculada e a vitrine repinta. Tudo isso sai do próprio Svelte, sem código extra para ouvir o teclado. Ele já sabe quais pedaços da tela dependem da lista.

Como salvar o carrinho quando o cliente recarrega a página?

Com o $effect, que serve para conversar com o mundo fora da tela. Ele fala com a memória do navegador, com a medição de acesso ou com outro sistema. Ele roda depois que a tela atualiza e volta a rodar quando o valor que ele lê muda.

O caso mais comum numa loja é guardar o carrinho, para que os itens continuem lá quando o cliente recarregar a página.

<script lang="ts">
  let carrinho = $state<Array<{ id: string; qtd: number }>>([]);

  // Hidrata uma vez, no cliente.
  $effect(() => {
    const salvo = localStorage.getItem('carrinho');
    if (salvo) carrinho = JSON.parse(salvo);
  });

  // Persiste sempre que o carrinho muda.
  $effect(() => {
    localStorage.setItem('carrinho', JSON.stringify(carrinho));
  });
</script>

O segundo $effect lê o carrinho, então roda de novo a cada mudança na lista. Use o $effect com parcimônia: ele é a ponte para o lado de fora. Para calcular um valor a partir de outro, o lugar certo é o $derived. Confundir os dois é o erro mais comum de quem chega agora.

Como entregar o catálogo já pronto para o Google e para a IA?

Com a função load(), que roda no servidor e alimenta a página antes de mandá-la. A página chega ao navegador, e ao robô que a lê, já preenchida com os produtos. O SvelteKit faz isso por padrão.

No SvelteKit, cada endereço do site é uma pasta. O +page.svelte é a tela e o +page.server.ts busca os dados e trata os formulários. O +layout.svelte envolve as telas, e o +server.ts abre uma porta de comunicação. Veja uma página de categoria:

// src/routes/categoria/[slug]/+page.server.ts
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params, fetch }) => {
  const resposta = await fetch(`https://api.minhaloja.com.br/categorias/${params.slug}/produtos`);
  const produtos = await resposta.json();

  return { produtos, slug: params.slug };
};

A tela usa os dados sem precisar saber de onde vieram. Como tudo foi resolvido no servidor, a primeira página já chega com os produtos dentro:

<!-- src/routes/categoria/[slug]/+page.svelte -->
<script lang="ts">
  let { data } = $props();
</script>

<h1>Categoria: {data.slug}</h1>

<ul>
  {#each data.produtos as produto}
    <li>{produto.nome} — R$ {produto.preco.toFixed(2)}</li>
  {/each}
</ul>

Isso decide a sua presença na resposta da IA. O robô do Google e a maioria dos coletores que alimentam os assistentes leem a página servida, sem rodar os programas pesados dela.

Se o catálogo só existisse depois que esses programas rodassem no celular, boa parte desses robôs veria uma página vazia. Com o catálogo montado no servidor, eles veem nome, preço e descrição, que é o material citado quando alguém pergunta qual loja vende aquele produto no Brasil.

Montar a página no servidor vale além do Google. Vale para qualquer robô que lê páginas, inclusive os assistentes que respondem às perguntas dos seus clientes antes de eles chegarem ao seu site.

Como fazer o formulário funcionar mesmo no celular fraco?

Com o envio tratado no servidor pelo +page.server.ts e a marca use:enhance no formulário. O servidor recebe e processa o envio. A marca acrescenta o comportamento melhor no celular, quando o aparelho dá conta.

Veja o cadastro de e-mail, o pão com manteiga de qualquer loja que monta a própria lista de contatos:

// src/routes/+page.server.ts
import type { Actions } from './$types';
import { fail } from '@sveltejs/kit';

export const actions = {
  default: async ({ request }) => {
    const form = await request.formData();
    const email = String(form.get('email') ?? '');

    if (!email.includes('@')) {
      return fail(400, { email, erro: 'E-mail inválido.' });
    }

    // Aqui você grava o contato na sua base.
    return { sucesso: true };
  }
} satisfies Actions;

No componente, o formulário usa method="POST". Sem os programas da página, o navegador envia e recarrega a tela com o resultado. Com o use:enhance, a tela atualiza sem recarregar:

<!-- src/routes/+page.svelte -->
<script lang="ts">
  import { enhance } from '$app/forms';
  let { form } = $props();
</script>

<form method="POST" use:enhance>
  <input type="email" name="email" placeholder="Seu e-mail" required />
  <button type="submit">Quero novidades</button>

  {#if form?.erro}<p class="erro">{form.erro}</p>{/if}
  {#if form?.sucesso}<p class="ok">Inscrição confirmada.</p>{/if}
</form>

Esse é o coração da ideia: o básico funciona sozinho, e a experiência melhora quando o celular dá conta. Num checkout, isso vira robustez. O cliente com conexão ruim ou com bloqueador ligado ainda consegue comprar.

Como reaproveitar o mesmo card de produto na vitrine?

Com o {#snippet}, que define um pedaço de tela reutilizável, e o {@render}, que o desenha. No Svelte 5, esse recurso ocupa o lugar dos antigos encaixes para repetir marcação dentro de uma mesma tela.

<script lang="ts">
  let { produtos } = $props();
</script>

{#snippet cardProduto(p)}
  <article class="card">
    <h3>{p.nome}</h3>
    <p>R$ {p.preco.toFixed(2)}</p>
    <button onclick={() => console.log('adicionar', p.id)}>Adicionar</button>
  </article>
{/snippet}

<section class="grade">
  {#each produtos as produto}
    {@render cardProduto(produto)}
  {/each}
</section>

O pedaço chamado cardProduto recebe os dados do produto e é desenhado quantas vezes for preciso. Você deixa de criar um arquivo separado para um trecho pequeno e repetido, e o pacote final continua enxuto.

Quando o Svelte é a escolha certa para a sua loja?

Quando a tela tem muita interação e o peso dos programas no celular é um problema real do seu público. É o caso da vitrine com filtros, da página de produto com variações e carrinho, e do caminho até o pagamento.

A decisão honesta compara com os vizinhos. Para páginas de conteúdo com pouca interação, o Astro com islands entrega ainda menos código ao celular.

Se o seu time já trabalha em React e o produto é um painel pesado de retaguarda, o Next 16 com React 19 traz mais peças prontas. O comparativo lado a lado está em como escolher a stack de frontend para e-commerce.

O Svelte ocupa o meio-termo. Ele é leve como uma página parada e confortável com muita interação. Para a loja de um negócio médio que precisa de velocidade sem abrir mão de filtro, carrinho e busca, essa combinação é difícil de bater.

O que fazer hoje

Comece pequeno. Reescreva uma página de categoria em SvelteKit, com os produtos buscados no servidor e o filtro rodando na tela. Meça a velocidade antes e depois num celular comum. Depois aprofunde nestes guias:

• Storefront como app e PWA mobile: como levar essa base reativa para uma experiência instalável.
• Composable, MACH e headless API-first: como o load() do SvelteKit conversa com um back-end desacoplado.
• Busca, navegação e discovery com IA: como evoluir o filtro simples deste guia para descoberta inteligente.

A loja de papelaria do começo tinha milhares de itens e um celular fraco do outro lado. Uma página que abre rápido, responde ao toque e chega pronta do servidor agrada o cliente e vira a fonte que os assistentes de IA preferem citar.