Para Onde Vai o Conteúdo da Página?

O layout envolve as páginas, mas como exatamente o conteúdo da página acaba dentro do layout? Entender o {@render children()} é fundamental para dominar os layouts.

O Que Você Vai Aprender

Como children representa o conteúdo da página
O fluxo de renderização da página para o layout
Posicionando {@render children()} para diferentes layouts

O Fluxo de Conteúdo

Quando você acessa /about, é isso que acontece:

O SvelteKit encontra src/routes/about/+page.svelte
O SvelteKit também encontra src/routes/+layout.svelte
O conteúdo da página /about/+page.svelte se torna o snippet children
O layout é renderizado, chamando {@render children()} onde apropriado
O conteúdo da página aparece exatamente nessa posição

/about request
     │
     ▼
┌─────────────────────────────────┐
│  +layout.svelte                 │
│  ┌───────────────────────────┐  │
│  │  about/+page.svelte       │  │
│  │  (rendered as children)   │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

Posicionando o Conteúdo

A posição de {@render children()} determina onde o conteúdo da página aparece. Você controla isso:

<!-- Content at the top -->
<script>
  let { children } = $props();
</script>

{@render children()}
<footer>Always at bottom</footer>

<!-- Content in the middle -->
<script>
  let { children } = $props();
</script>

<header>Always at top</header>
{@render children()}
<footer>Always at bottom</footer>

<!-- Content in a specific container -->
<script>
  let { children } = $props();
</script>

<div class="sidebar">Navigation</div>
<main class="content">
  {@render children()}
</main>

Um Experimento Visual

Vamos tornar a estrutura do layout visível. Atualize seu layout:

<!-- filename: src/routes/+layout.svelte -->
<script>
	import favicon from '$lib/assets/favicon.svg';

	let { children } = $props();
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
</svelte:head>

<nav>
	<a href="/">BookIt</a>
	<a href="/services">Services</a>
	<a href="/about">About</a>
	<a href="/contact">Contact</a>
</nav>

<div style="border: 3px solid blue; padding: 1rem;">
  <p style="color: blue;">LAYOUT START</p>
  
  <div style="border: 3px solid green; padding: 1rem;">
    {@render children()}
  </div>
  
  <p style="color: blue;">LAYOUT END</p>
</div>

Agora acesse diferentes páginas. Você verá:

Borda azul ao redor de tudo (o layout)
Borda verde ao redor do conteúdo da página (onde children é renderizado)
"LAYOUT START" sempre no topo
"LAYOUT END" sempre na parte inferior
O conteúdo de cada página dentro da caixa verde

Essa depuração visual ajuda você a entender exatamente onde o conteúdo é posicionado.

O Que Children Realmente É

No Svelte 5, children é um snippet — um tipo especial que representa conteúdo renderizável. Quando o SvelteKit se prepara para renderizar uma rota:

Ele compila a página em um snippet
Ele passa esse snippet para o layout como children
O layout decide onde renderizá-lo

Você pode pensar nisso como um marcador de posição que é preenchido com o conteúdo real.

Múltiplos Pontos de Renderização?

Você pode se perguntar: é possível renderizar children mais de uma vez?

<script>
  let { children } = $props();
</script>

<!-- Don't do this -->
{@render children()}
<hr>
{@render children()}

Tecnicamente, isso renderiza a página duas vezes. Raramente existe uma boa razão para fazer isso — mostraria conteúdo duplicado e poderia causar problemas com formulários ou componentes com estado.

Mantenha a renderização de children exatamente uma vez.

O Layout Real

Remova o estilo de depuração e configure uma estrutura adequada:

<!-- filename: src/routes/+layout.svelte -->
<script>
  let { children } = $props();
</script>

<div class="app">
  <!-- Header -->
  <header>
    <!-- Navigation will go here -->
  </header>
  <!-- Main content -->
  <main>
    {@render children()}
  </main>
  
  <!-- Footer -->
  <footer>
    <!-- Footer will go here -->
  </footer>
</div>

Essa estrutura fornece:

Um <header> para navegação (no topo de cada página)
Um <main> para o conteúdo da página (varia por página)
Um <footer> para o rodapé do site (na parte inferior de cada página)

Erros Comuns

Renderizando Dentro de uma Condição Sem Fallback

<!-- ❌ Page might not render -->
{#if showContent}
  {@render children()}
{/if}

Se showContent for falso, o conteúdo da página desaparece completamente. Tenha cuidado com a renderização condicional ao redor de children.

Aninhando Children Incorretamente

<!-- ❌ Confusing structure -->
<div>
  <div>
    <div>
      {@render children()}
    </div>
  </div>
</div>

Embora isso funcione, o aninhamento excessivo torna o estilo difícil. Mantenha a estrutura do seu layout tão simples quanto possível.

Resumo

A diretiva {@render children()} é onde o conteúdo da página aparece dentro de um layout. Você controla o posicionamento colocando essa diretiva onde deseja que a página seja renderizada. O layout envolve, a página preenche o espaço designado.

Principais conclusões:

children é um snippet que contém o conteúdo da página
{@render children()} renderiza a página exatamente nessa posição
A estrutura do layout (header, main, footer) envolve o ponto de renderização

Próximos Passos

A estrutura do layout está pronta. Continue com Adicionar um Cabeçalho de Site para construir a barra de navegação do BookIt.