¿A dónde va el contenido de la página?

El layout envuelve las páginas, pero ¿cómo termina exactamente el contenido de la página dentro del layout? Entender {@render children()} es clave para dominar los layouts.

Lo que aprenderás

Cómo children representa el contenido de la página
El flujo de renderizado desde la página al layout
Cómo posicionar {@render children()} para diferentes layouts

El flujo de contenido

Cuando visitas /about, esto es lo que sucede:

SvelteKit encuentra src/routes/about/+page.svelte
SvelteKit también encuentra src/routes/+layout.svelte
El contenido de la página /about/+page.svelte se convierte en el snippet children
El layout se renderiza, llamando a {@render children()} donde corresponde
El contenido de la página aparece exactamente en esa posición

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

Posicionando el contenido

La posición de {@render children()} determina dónde aparece el contenido de la página. Tú controlas esto:

<!-- 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>

Un experimento visual

Hagamos visible la estructura del layout. Actualiza tu 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>

Ahora visita diferentes páginas. Verás:

Borde azul alrededor de todo (el layout)
Borde verde alrededor del contenido de la página (donde se renderiza children)
"LAYOUT START" siempre arriba
"LAYOUT END" siempre abajo
El contenido de cada página dentro del recuadro verde

Esta depuración visual te ayuda a entender exactamente dónde aterriza el contenido.

Qué es realmente children

En Svelte 5, children es un snippet — un tipo especial que representa contenido renderizable. Cuando SvelteKit se prepara para renderizar una ruta:

Compila la página en un snippet
Pasa ese snippet al layout como children
El layout decide dónde renderizarlo

Puedes pensarlo como un marcador de posición que se rellena con el contenido real.

¿Múltiples puntos de renderizado?

Quizás te preguntes: ¿puedes renderizar children más de una vez?

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

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

Técnicamente esto renderiza la página dos veces. Rara vez hay una buena razón para hacer esto — mostraría contenido duplicado y podría causar problemas con formularios o componentes con estado.

Limítate a renderizar children exactamente una vez.

El layout real

Elimina el estilo de depuración y configura una estructura adecuada:

<!-- 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>

Esta estructura proporciona:

Un <header> para la navegación (en la parte superior de cada página)
Un <main> para el contenido de la página (varía por página)
Un <footer> para el pie de sitio global (en la parte inferior de cada página)

Errores comunes

Renderizar dentro de una condición sin alternativa

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

Si showContent es false, el contenido de la página desaparece por completo. Ten cuidado con el renderizado condicional alrededor de children.

Anidar children incorrectamente

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

Si bien esto funciona, el anidamiento excesivo dificulta el estilado. Mantén la estructura de tu layout tan plana como sea razonable.

Resumen

La directiva {@render children()} es donde el contenido de la página aparece dentro de un layout. Controlas el posicionamiento colocando esta directiva donde quieres que se renderice la página. El layout envuelve, la página llena el espacio designado.

Puntos clave:

children es un snippet que contiene el contenido de la página
{@render children()} renderiza la página exactamente en esa posición
La estructura del layout (header, main, footer) rodea el punto de renderizado

Próximos pasos

La estructura del layout está lista. Continúa con Agregar un encabezado de sitio para construir la barra de navegación de BookIt.