Svelte 50: El Modelo Mental de SvelteKit
easy⏱ 5 mincoursesvelte
Enrutamiento basado en archivos
Cada carpeta dentro de src/routes/ se convierte en un segmento de URL, y un +page.svelte dentro de ella es la página que se renderiza para esa ruta. Los corchetes crean segmentos dinámicos, como [slug]. No hay ninguna librería de enrutamiento que instalar ni configurar — el sistema de archivos ES la tabla de rutas.
src/routes/
├── +page.svelte // matches "/"
├── about/
│ └── +page.svelte // matches "/about"
└── blog/
└── [slug]/
├── +page.svelte // matches "/blog/:slug"
└── +page.js // universal load() for this route
Funciones load: universales vs. de servidor
Una función load en +page.js se ejecuta tanto en el servidor como en el cliente (universal) — útil para obtener datos públicos. Una función load en +page.server.js se ejecuta SOLO en el servidor — el único lugar donde puedes tocar de forma segura una base de datos, claves de API secretas o cookies. Lo que la función load retorna se convierte en la prop data de +page.svelte.
// src/routes/blog/[slug]/+page.server.js
import { db } from '$lib/server/db';
export async function load({ params }) {
const post = await db.posts.findUnique({ where: { slug: params.slug } });
return { post };
}
// src/routes/blog/[slug]/+page.svelte
<script>
let { data } = $props();
</script>
<h1>{data.post.title}</h1>
Este sandbox no puede alojar rutas reales
No hay sistema de archivos para que SvelteKit escanee ni un proceso de servidor aquí, así que el enrutamiento real basado en archivos no puede ejecutarse literalmente. Lo que SÍ puede ejecutarse: un enrutador hecho a mano usando un writable store real y en vivo para guardar la 'ruta actual' e intercambiar componentes — que es conceptualmente exactamente lo que hace SvelteKit por debajo, solo que automatizado por ti.