Guia de SvelteKit · 3/6

Core Concepts

Por enquanto, este capítulo está disponível apenas em inglês.

SvelteKit has two layers worth understanding: Svelte components and runes, which build the UI, and SvelteKit's routing and rendering model, which maps those components to URLs and renders them on the server and in the browser.

Svelte components

Each .svelte file is one component. Logic goes in <script>, markup follows it, and styles go in <style>, which is scoped to that component by default. Svelte compiles the file into code that updates exactly the parts of the DOM that changed, with no virtual DOM.

Runes: $state, $derived, $effect, $props

The current generation of Svelte (Svelte 5) expresses reactivity with runes, special symbols that start with $. They look like functions, but they are syntax understood by the compiler, so you never import them.

Rune	Purpose
`$state`	State that updates the UI when it changes
`$derived`	A value computed from other state
`$effect`	A side effect that runs after state changes (DOM work, timers, third-party libraries)
`$props`	Receive the props passed by a parent
`$bindable`	Mark a prop that a parent can bind to two-way

<script lang="ts">
  let items = $state<string[]>([]);
  let text = $state('');

  let total = $derived(items.length);
  let empty = $derived(total === 0);

  $effect(() => {
    document.title = `${total} todos`;
  });

  function add() {
    if (text.trim()) items.push(text.trim());
    text = '';
  }
</script>

<input bind:value={text} />
<button onclick={add}>Add</button>

{#if empty}
  <p>Nothing to do.</p>
{:else}
  <ul>
    {#each items as item}
      <li>{item}</li>
    {/each}
  </ul>
{/if}

Arrays and objects created with $state are deeply reactive, so mutating them directly with items.push() updates the UI. Reach for $derived whenever a value can be computed, and keep $effect for genuine side effects. Effects only run in the browser, never during server-side rendering.

Props and snippets

A child component receives props through $props(). Instead of the older export let syntax and on:click directives, you destructure props and use plain attributes such as onclick. Markup passed to a child becomes a snippet, which the child renders with {@render ...}.

Dúvidas sobre este capítulo?

Option	Default	Meaning
`prerender`	`false`	`true` generates HTML at build time; `'auto'` also keeps the route available for server rendering
`ssr`	`true`	`false` sends an empty shell and renders in the browser
`csr`	`true`	`false` ships no JavaScript

Core Concepts

Svelte components

Runes: $state, $derived, $effect, $props

Props and snippets

File-based routing and layouts

SSR, CSR and prerendering

Summary

0 comentários