Carga Universal de Datos en Layouts

Así como las páginas tienen +page.js para la carga de datos, los layouts tienen +layout.js. Este archivo carga datos que el layout necesita y que fluyen hacia cada página y layout hijo en su subárbol. Se ejecuta tanto en el servidor como en el navegador, lo que lo convierte en carga de datos universal.

El punto clave sobre las funciones de carga de un layout es cuándo se ejecutan versus cuándo no. La función de carga de un layout se ejecuta la primera vez que entras a su subárbol. No se vuelve a ejecutar automáticamente al navegar entre páginas que comparten ese layout — SvelteKit almacena el resultado en caché y lo reutiliza. Esto hace que la carga de layouts sea eficiente para datos que son estables durante la sesión de un usuario dentro de una sección: estructura de navegación, configuración del sitio, categorías disponibles. Para datos que cambian frecuentemente o dependen de la URL actual, deberás expresar esa dependencia de forma explícita (cubierto en la sección de invalidación más adelante).

La carga de datos en layouts establece el "contexto ambiental" para una sección de tu aplicación: estructura de navegación, feature flags, preferencias de usuario, configuración del sitio. Piensa detenidamente qué corresponde aquí versus en las funciones de carga de páginas individuales. El criterio para los datos del layout debe ser: "¿casi todas las páginas de esta sección necesitan esto?"

Cuándo Usar `+layout.js`

Usa +layout.js cuando necesites cargar:

Datos de navegación — Categorías, elementos de menú, estructura del sitio
Configuración pública — Feature flags, configuraciones del sitio
Contenido compartido — Categorías de blog, categorías de productos
Datos necesarios por múltiples páginas — Evita cargar los mismos datos en cada página

El requisito clave: los datos deben ser públicos (sin secretos) y serializables.

Carga Básica de Datos en Layouts

// src/routes/blog/+layout.ts
import type { LayoutLoad } from './$types'

export const load: LayoutLoad = async ({ fetch }) => {
	const response = await fetch('/api/categories')
	const categories = await response.json()

	return {
		categories
	}
}

Estos datos ahora están disponibles en:

El componente del layout (+layout.svelte)
Todas las páginas hijas
Todos los layouts hijos

Los Datos Fluyen Aguas Abajo

Superpoder: Los datos retornados por la función load de un layout fluyen hacia abajo como una cascada. Están disponibles automáticamente para todos los descendientes.

src/routes/
├── +layout.ts         → Returns { siteConfig }
├── +layout.svelte     → Has access to data.siteConfig
├── blog/
│   ├── +layout.ts     → Returns { categories }
│   ├── +layout.svelte → Has access to data.siteConfig AND data.categories
│   └── [slug]/
│       └── +page.svelte → Has access to ALL parent data

Accediendo a Datos del Padre

<!-- src/routes/blog/[slug]/+page.svelte -->
<script lang="ts">
	import type { PageProps } from './$types'

	let { data }: PageProps = $props()

	// data includes:
	// - siteConfig (from root +layout.ts)
	// - categories (from blog/+layout.ts)
	// - post (from [slug]/+page.ts)
</script>

<aside>
	<h3>Categories</h3>
	{#each data.categories as category}
		<a href="/blog?category={category.slug}">{category.name}</a>
	{/each}
</aside>

<article>
	<h1>{data.post.title}</h1>
	<p>{data.post.content}</p>
</article>

Accediendo a Datos del Padre en Funciones de Carga

Las funciones de carga hijas pueden acceder a los datos del padre usando la función parent():

// src/routes/blog/[slug]/+page.ts
import type { PageLoad } from './$types'

export const load: PageLoad = async ({ params, parent }) => {
	// Wait for parent layout data
	const parentData = await parent()

	// Now you can use parentData.categories, etc.
	const category = parentData.categories.find((c) => c.id === params.categoryId)

	return {
		post: await fetchPost(params.slug),
		categoryName: category?.name
	}
}

Llama a parent() solo cuando genuinamente necesitas datos de un layout padre. Llamarlo innecesariamente obliga a que esta función de carga espere a que el padre termine antes de poder comenzar — incluso si los datos que produce no tienen nada que ver con el resultado del padre. Si puedes obtener tus datos de forma independiente y solo necesitas un pequeño fragmento del contexto padre (como una cadena de locale o una lista de categorías), considera si ese fragmento podría estar en params, url, o en la propia ruta. Las llamadas innecesarias a parent() son una de las causas más comunes de cascadas de carga de datos evitables en aplicaciones SvelteKit.

Carga de Datos Basada en URL

Las funciones de carga de layouts tienen acceso a la URL, lo que te permite cargar datos distintos según los parámetros de consulta:

// src/routes/blog/+layout.ts
import type { LayoutLoad } from './$types'

export const load: LayoutLoad = async ({ fetch, url }) => {
	const activeCategory = url.searchParams.get('category')

	const [categories, featuredPosts] = await Promise.all([
		fetch('/api/categories').then((r) => r.json()),
		fetch(`/api/posts/featured?category=${activeCategory || ''}`).then((r) => r.json())
	])

	return {
		categories,
		featuredPosts,
		activeCategory
	}
}

Cuándo se Recarga la Data del Layout

Este es uno de los comportamientos más importantes de entender, y una fuente común de confusión.

Por defecto, la función de carga de un layout se ejecuta una vez cuando entras al subárbol del layout. No se vuelve a ejecutar al navegar entre páginas hermanas dentro de ese subárbol. Navegar de /blog/post-a a /blog/post-b no volverá a ejecutar /blog/+layout.ts. Eso es intencional — recargar las categorías de navegación o la configuración del sitio en cada clic de página sería innecesario.

Pero a veces sí necesitas que el layout se vuelva a ejecutar. Si tu función de carga del layout obtiene una lista filtrada basada en un parámetro de consulta de la URL, necesita volver a ejecutarse cuando ese parámetro cambie.

La forma de expresar esto en SvelteKit es leyendo del objeto url o llamando a depends(). SvelteKit rastrea a qué accedió una función de carga durante su última ejecución. Si la URL cambia de una manera que produciría entradas diferentes, la función de carga se vuelve a ejecutar:

// src/routes/blog/+layout.ts
import type { LayoutLoad } from './$types'

export const load: LayoutLoad = async ({ fetch, url, depends }) => {
	// Declaring a custom dependency allows manual invalidation via invalidate('app:category')
	depends('app:category')

	// Reading url.searchParams causes SvelteKit to re-run this function
	// whenever the ?category= query string changes
	const category = url.searchParams.get('category')

	return {
		posts: await fetch(`/api/posts?category=${category}`).then((r) => r.json())
	}
}

Dado que esta función de carga lee url.searchParams, SvelteKit sabe que depende del query string de la URL. Cambiar de /blog?category=tech a /blog?category=design volverá a ejecutar la función de carga del layout automáticamente. Sin acceder al objeto url, la función de carga solo se ejecutaría una vez.

Para disparar una re-ejecución desde cualquier parte de tu aplicación, llama a invalidate('app:category') o usa invalidateAll() para una recarga completa de todas las funciones de carga en la página actual.

Carga Paralela de Datos

Al cargar múltiples recursos, usa Promise.all para mayor eficiencia:

// src/routes/+layout.ts
import type { LayoutLoad } from './$types'

export const load: LayoutLoad = async ({ fetch }) => {
	// Load all resources in parallel
	const [navigation, footerLinks, announcements] = await Promise.all([
		fetch('/api/navigation').then((r) => r.json()),
		fetch('/api/footer-links').then((r) => r.json()),
		fetch('/api/announcements').then((r) => r.json())
	])

	return {
		navigation,
		footerLinks,
		announcements
	}
}

Combinando con `+layout.server.js`

Puedes tener tanto +layout.js como +layout.server.js para el mismo layout. Cuando lo haces:

+layout.server.js se ejecuta primero (en el servidor)
Sus datos están disponibles para +layout.js como la propiedad data
+layout.js puede transformar o agregar a estos datos

// src/routes/+layout.server.ts
export const load = async ({ locals }) => {
	return {
		user: locals.user // Server-only (from cookies/session)
	}
}

// src/routes/+layout.ts
import type { LayoutLoad } from './$types'

export const load: LayoutLoad = async ({ data, fetch }) => {
	// `data` contains { user } from +layout.server.ts

	const navigation = await fetch('/api/navigation').then((r) => r.json())

	return {
		...data, // Include server data
		navigation // Add universal data
	}
}

Patrones Comunes

Configuración Global del Sitio

// src/routes/+layout.ts
import type { LayoutLoad } from './$types'

export const load: LayoutLoad = async ({ fetch }) => {
	const config = await fetch('/api/config').then((r) => r.json())

	return {
		siteName: config.siteName,
		features: {
			darkMode: config.enableDarkMode,
			newsletter: config.enableNewsletter
		}
	}
}

Navegación con Estado Activo

// src/routes/+layout.ts
import type { LayoutLoad } from './$types'

export const load: LayoutLoad = async ({ url }) => {
	const navigation = [
		{ href: '/', label: 'Home' },
		{ href: '/about', label: 'About' },
		{ href: '/blog', label: 'Blog' },
		{ href: '/contact', label: 'Contact' }
	].map((item) => ({
		...item,
		active: url.pathname === item.href || url.pathname.startsWith(item.href + '/')
	}))

	return { navigation }
}

Conclusión

El archivo +layout.js representa un patrón poderoso para establecer contexto global de la aplicación y datos compartidos sin la sobrecarga de solicitudes redundantes o el paso manual de props.

Al cargar datos una vez a nivel de layout y ponerlos a disposición de todas las rutas descendientes, creas una arquitectura más eficiente y mantenible donde la estructura de navegación, las preferencias del usuario y la configuración compartida fluyen naturalmente a través de la jerarquía de componentes.

La naturaleza universal de este archivo (que se ejecuta tanto en el servidor como en el cliente) garantiza un comportamiento consistente ya sea que los usuarios lleguen mediante URL directa o navegación del lado del cliente.

Dominar +layout.js requiere entender su relación con +layout.server.js para estrategias de datos híbridas, la función parent() para acceder a datos de ancestros, y los patrones de invalidación para controlar cuándo se vuelven a ejecutar los layouts.

Al organizar cuidadosamente qué datos pertenecen a los layouts versus a las páginas, construyes aplicaciones que son tanto eficientes como fáciles de comprender — con límites claros entre el contexto compartido y las preocupaciones específicas de cada página.

Puntos Clave

+layout.js proporciona carga universal de datos para layouts que se ejecuta tanto en el servidor (SSR) como en el cliente (navegación), poniendo los datos a disposición del componente del layout y todas las rutas hijas
Los datos fluyen aguas abajo hacia todos los descendientes — las páginas y layouts hijos reciben automáticamente los datos del layout padre a través de la prop data sin necesidad de pasarlos explícitamente
La función parent() permite la composición de datos — las funciones de carga hijas pueden hacer await de parent() para acceder a datos de ancestros y construir sobre ellos con propiedades adicionales
Los datos del layout se almacenan en caché durante la navegación entre rutas hermanas — los datos solo se recargan al salir y volver al ámbito del layout, o cuando se invalidan explícitamente
Los patrones de invalidación controlan las re-ejecuciones — usa depends('custom:identifier') con invalidate() o incluye dependencias basadas en URL para disparar la recarga de datos del layout
Combina con +layout.server.js para estrategias híbridas — usa .server.js para datos sensibles (autenticación, base de datos) y .js para datos públicos (navegación, categorías)
La carga paralela optimiza el rendimiento — usa Promise.all() para obtener múltiples fuentes de datos de forma concurrente en lugar de secuencial
Debe retornar datos serializables — todos los datos retornados desde +layout.js deben ser serializables a JSON, ya que fluyen del servidor al cliente durante el SSR

Ver También

Documentación Oficial de SvelteKit - +layout.js
Funciones de Carga en SvelteKit — Guía completa de funciones de carga
invalidate() e invalidateAll() — Invalidación manual de datos