¿Qué es `+page.svelte`?

El archivo +page.svelte es el núcleo de cualquier ruta en SvelteKit. Define lo que los usuarios ven cuando visitan una URL. Es un componente Svelte estándar con un nombre especial que SvelteKit reconoce como una página.

Tip: Piensa en +page.svelte como la "vista" en la arquitectura MVC. Debería enfocarse en la presentación. Mantén la lógica de negocio en las funciones de carga y módulos utilitarios—esto hace que tus páginas sean más fáciles de testear y refactorizar.

Tu Primera Página: La Página de Inicio

La ruta más importante en cualquier aplicación es la ruta raíz, o "página de inicio". En SvelteKit, esto corresponde a la raíz de tu directorio src/routes.

Si creas un archivo en src/routes/+page.svelte, estás definiendo el contenido para https://tu-sitio.com/.

<!-- src/routes/+page.svelte -->

<h1>Welcome to My Website</h1>
<p>This is the homepage.</p>

Eso es todo. Visita http://localhost:5173/ en tu navegador y verás este contenido. Sin archivos de configuración, sin registro de rutas—solo un archivo en el lugar correcto.

Agregando Más Páginas

Vamos a expandir tu aplicación con páginas adicionales.

Página About

En la carpeta de rutas, agrega una nueva carpeta llamada about y dentro de ella crea +page.svelte:

<!-- src/routes/about/+page.svelte -->
<h1>About Us</h1>
<p>We are a company that builds amazing things.</p>

<h2>Our Mission</h2>
<p>To make the web a better place, one component at a time.</p>

Página Contact

Ahora crea otra carpeta llamada contact con su propio +page.svelte:

<!-- src/routes/contact/+page.svelte -->
<h1>Contact Us</h1>

<form>
	<label>
		Name:
		<input type="text" name="name" />
	</label>

	<label>
		Email:
		<input type="email" name="email" />
	</label>

	<label>
		Message:
		<textarea name="message"></textarea>
	</label>

	<button type="submit">Send Message</button>
</form>

Estructura de Directorios

La estructura de directorios de tu proyecto ahora se ve así:

src/routes/
├── +page.svelte          → /
├── about/
│   └── +page.svelte      → /about
└── contact/
    └── +page.svelte      → /contact

Cada carpeta se convierte en un segmento de URL. Cada +page.svelte define lo que se renderiza en esa URL.

Las Páginas Son Simplemente Componentes Svelte

Un archivo +page.svelte es un componente Svelte regular. Puedes usar todo lo que sabes sobre Svelte:

Estado con Runes

Puedes usar el sistema de reactividad de Svelte 5 directamente en tus páginas. El rune $state te permite crear estado local que actualiza la UI cuando cambia.

<!-- src/routes/counter/+page.svelte -->
<script lang="ts">
	let count = $state(0)
</script>

<h1>Counter</h1>
<p>Count: {count}</p>
<button onclick={() => count++}>Increment</button>

Tip: Para un análisis en profundidad sobre los runes y la reactividad de Svelte 5, consulta nuestra guía completa de Svelte 5 Runes.

Importando Componentes

Las páginas pueden importar y usar otros componentes Svelte. Esto te permite construir UIs complejas componiendo piezas más pequeñas y reutilizables.

Vamos a crear dos componentes: Button.svelte y Hero.svelte.

<!-- src/lib/components/Button.svelte -->
<script lang="ts">
	// Svelte 5: Use $props() to receive props
	let { onclick, children } = $props()
</script>

<button {onclick}>
	{@render children?.()}
</button>

<style>
	button {
		background-color: var(--brand);
		color: white;
		border: none;
		padding: 0.5rem 1rem;
		border-radius: 0.25rem;
		cursor: pointer;
		font-size: 1rem;
	}
</style>

<!-- src/lib/components/Hero.svelte -->
<script lang="ts">
	// Svelte 5: Use $props() to receive props
	let { title, subtitle } = $props()
</script>

<section class="hero">
	<h1>{title}</h1>
	<p>{subtitle}</p>
</section>

<style>
	.hero {
		padding: 2rem;
		background-color: var(--brand-light);
		color: var(--brand-dark);
		border-radius: 0.5rem;
		text-align: center;
	}
</style>

Ahora puedes usar estos componentes en tus archivos +page.svelte:

<!-- src/routes/+page.svelte -->
<script lang="ts">
	import Button from '$lib/components/Button.svelte'
	import Hero from '$lib/components/Hero.svelte'
</script>

<Hero title="Welcome" subtitle="To my amazing website" />

<Button onclick={() => alert('Clicked!')}>Click me</Button>

Estilos

Los estilos en +page.svelte están limitados al componente por defecto. Esto significa que puedes escribir CSS sin preocuparte de que afecte otras partes de tu aplicación.

<!-- src/routes/about/+page.svelte -->
<h1>About Us</h1>
<p class="intro">We build amazing things.</p>

<style>
	h1 {
		color: var(--brand);
		font-size: 2.5rem;
	}

	.intro {
		font-size: 1.25rem;
		color: var(--text-dimmed);
	}
</style>

Ciclo de Vida: Las Páginas se Montan y Desmontan

Dado que las páginas son simplemente componentes, siguen el ciclo de vida normal de Svelte. Cuando navegas entre páginas, la página anterior se desmonta y la nueva página se monta:

<!-- src/routes/+page.svelte -->
<script lang="ts">
	import { onMount, onDestroy } from 'svelte'

	onMount(() => console.log('Home page mounted'))
	onDestroy(() => console.log('Home page unmounted'))
</script>

<h1>Home</h1>

<!-- src/routes/about/+page.svelte -->
<script lang="ts">
	import { onMount, onDestroy } from 'svelte'

	onMount(() => console.log('About page mounted'))
	onDestroy(() => console.log('About page unmounted'))
</script>

<h1>About</h1>

Navega entre páginas y observa tu consola. Verás cómo las páginas se montan y desmontan a medida que te mueves. Esto es útil para la limpieza (cancelar suscripciones, limpiar timers) y la inicialización.

Entendiendo el Server-Side Rendering (SSR)

Si has desarrollado Single Page Applications (SPAs) antes con herramientas como React o Vue estándar, puede que estés familiarizado con la "pantalla blanca de la muerte". Esto sucede porque el navegador descarga un archivo HTML vacío y tiene que esperar a que un gran bundle de JavaScript se descargue y ejecute antes de mostrar cualquier cosa al usuario.

SvelteKit resuelve esto con Server-Side Rendering (SSR).

Cómo Funciona el SSR

Esto es lo que sucede cuando un usuario visita tu página /about:

La Solicitud: El navegador del usuario le pide al servidor la página /about.
El Servidor Trabaja: En lugar de enviar un archivo en blanco, SvelteKit ejecuta tus componentes Svelte en el servidor. Genera una instantánea HTML completa de cómo debería verse la página.
La Entrega: El servidor envía este HTML completo al navegador. El usuario ve el contenido (texto, imágenes, diseño) de inmediato.
La Transferencia (Hydration): Un momento después, el JavaScript se carga en segundo plano. Svelte "despierta" y se adjunta al HTML existente. Este proceso se llama hydration.

sequenceDiagram
    participant Browser
    participant Server
    participant Database

    Browser->>Server: GET /about
    Server->>Database: Fetch data
    Database->>Server: Return data
    Server->>Server: Render Svelte component
    Server->>Browser: Send complete HTML
    Note over Browser: User sees content immediately
    Browser->>Browser: Download JavaScript
    Browser->>Browser: Hydrate (attach events)
    Note over Browser: Page becomes interactive

Por Qué Importa el SSR

Rendimiento Percibido: Los usuarios ven tu contenido de inmediato, incluso en conexiones lentas.
SEO (Search Engine Optimization): Google y otros motores de búsqueda pueden leer fácilmente el contenido de tu página porque es simplemente HTML plano.
Accesibilidad: El contenido principal funciona incluso si JavaScript falla o está deshabilitado.

¡No necesitas configurar nada para que esto funcione—es el comportamiento predeterminado en SvelteKit!

Ver el SSR en Acción

¿Quieres prueba de que tu código se ejecuta tanto en el servidor como en el cliente? Agrega un console.log a cualquier página:

<!-- src/routes/+page.svelte -->
<script lang="ts">
	console.log('Hello from the page!')
</script>

<h1>Home</h1>

Recarga la página y revisa tanto tu terminal (servidor) como tu consola del navegador (cliente). Verás "Hello from the page!" en ambos lugares. Esto demuestra que el componente se renderiza dos veces:

Primero en el servidor (lo ves en tu terminal)
Luego en el cliente durante la hydration (lo ves en las DevTools del navegador)

¡Esta ejecución dual es fundamental para entender SvelteKit!

Recibiendo Datos de las Funciones de Carga

Si bien +page.svelte puede funcionar completamente por sí solo, su verdadero poder surge cuando se combina con la carga de datos. Cuando tienes un archivo +page.js o +page.server.js junto a tu página, los datos que retornan se pasan automáticamente a tu componente.

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

	// The data prop contains everything returned from the load function
	let { data }: PageProps = $props()
</script>

<h1>Blog</h1>

{#each data.posts as post}
	<article>
		<h2>{post.title}</h2>
		<p>{post.excerpt}</p>
	</article>
{/each}

Cubriremos la carga de datos en detalle en los próximos artículos: +page.js y +page.server.js.

Manejo de Acciones de Formulario

Además de data, +page.svelte también puede recibir una prop form. Esto se usa cuando envías un formulario a una acción del servidor (definida en +page.server.js).

<script lang="ts">
	import type { PageProps } from './$types'

	let { data, form }: PageProps = $props()
</script>

{#if form?.success}
	<p class="success">Form submitted successfully!</p>
{/if}

<form method="POST">
	<!-- form fields -->
</form>

Exploraremos las acciones de formulario en profundidad cuando cubramos +page.server.js.

Administración del Head

`<svelte:head>`

Cada página generalmente necesita su propio título y meta tags para SEO. Svelte proporciona un elemento especial <svelte:head> que te permite insertar elementos en el <head> de tu documento.

<!-- src/routes/about/+page.svelte -->
<svelte:head>
	<title>About Us | My Website</title>
	<meta name="description" content="Learn more about our company and mission." />
</svelte:head>

<h1>About Us</h1>

Tip: El contenido de <svelte:head> de rutas anidadas se combina con los layouts padre. El <title> más específico (más profundo) tiene prioridad, mientras que las demás etiquetas se fusionan.

Preservación del Estado

`Snapshot`

A veces quieres preservar estado efímero (como el texto en un campo de búsqueda) cuando el usuario navega a otra página y luego hace clic en "atrás". SvelteKit facilita esto con snapshots.

<script lang="ts">
	import type { Snapshot } from './$types'
	let search = $state('')

	export const snapshot: Snapshot<string> = {
		capture: () => search,
		restore: (value) => (search = value)
	}
</script>

<input bind:value={search} placeholder="Search..." />

Tip: Los snapshots se cubren en detalle en nuestro artículo de Navegación, incluyendo patrones avanzados y casos de uso.

Precarga de Datos: Navegación Instantánea

¿Notaste qué tan instantánea se siente la navegación entre páginas? Eso es porque SvelteKit precarga los datos cuando pasas el cursor sobre los enlaces.

En tu src/app.html, verás:

<body data-sveltekit-preload-data="hover"></body>

Esto significa que cuando tu cursor pasa sobre un enlace, SvelteKit comienza a obtener los datos de esa página antes de que hagas clic. Para cuando haces clic, ¡los datos ya están cargados!

Puedes controlar este comportamiento:

"hover" — Precargar al pasar el cursor (predeterminado, ideal para escritorio)
"tap" — Precargar en touchstart/mousedown (mejor para móvil)
"off" — Sin precarga

Patrones Comunes

En esta sección, exploraremos algunos patrones comunes que usarás en los archivos +page.svelte.

Renderizado Condicional Basado en Datos

Frecuentemente queremos mostrar contenido diferente según los datos que recibimos. Por ejemplo, mostrar una lista de publicaciones o un mensaje si no hay ninguna.

<script lang="ts">
	import type { PageProps } from './$types'

	let { data }: PageProps = $props()
</script>

{#if data.posts.length > 0}
	<ul>
		{#each data.posts as post}
			<li>{post.title}</li>
		{/each}
	</ul>
{:else}
	<p>No posts yet. Check back soon!</p>
{/if}

Acceso al Estado Global de la Página

A veces necesitas acceder a la URL actual, parámetros o datos del usuario desde cualquier parte del árbol de componentes (no solo en +page.svelte). SvelteKit proporciona el objeto page para esto.

<script lang="ts">
	import { page } from '$app/state'
</script>

<p>Current path: {page.url.pathname}</p>

{#if page.data.user}
	<p>Welcome back, {page.data.user.name}!</p>
{/if}

Tip: El objeto page (de $app/state) es la forma moderna de Svelte 5 para acceder a la información de las rutas. Lo cubrimos en detalle en el artículo de Navegación.

Rutas Anidadas con Layout Compartido

Las páginas pueden anidarse dentro de carpetas para crear rutas URL. También puedes usar archivos +layout.svelte para compartir UI (como encabezados o barras laterales) entre múltiples páginas en un directorio.

src/routes/
├── blog/
│   ├── +layout.svelte    → Wraps all blog pages
│   ├── +page.svelte      → /blog (list of posts)
│   └── [slug]/
│       └── +page.svelte  → /blog/my-post (individual post)

Aprende más en nuestra guía de +layout.svelte.

Errores Comunes

1. Olvidar el Prefijo `+`

src/routes/
├── page.svelte          ❌ Ignored by SvelteKit
└── +page.svelte         ✅ This is your page

2. Esperar Datos Sin una Función de Carga

<!-- ❌ data will be empty if there's no +page.ts! -->
<script lang="ts">
	let { data } = $props()
</script>

<p>{data.title}</p> <!-- Error: title is undefined -->

Si necesitas datos, crea un archivo +page.js o +page.server.js (o sus equivalentes .ts si prefieres TypeScript).

3. Usar APIs del Navegador Durante el SSR

Durante el SSR (Server-Side Rendering), tu código se ejecuta en un entorno Node.js donde los objetos específicos del navegador como window, document o localStorage no existen. Si intentas acceder a ellos directamente, obtendrás un error en tiempo de ejecución en el servidor.

Para usar APIs del navegador de forma segura, siempre verifica si estás ejecutando en el navegador usando el booleano browser de $app/environment:

<script lang="ts">
	import { browser } from '$app/environment'

	// ❌ window doesn't exist on the server!
	// const width = window.innerWidth

	// ✅ Check for browser environment
	const width = browser ? window.innerWidth : 0
</script>

Conclusión

El archivo +page.svelte es donde el enrutamiento se encuentra con la UI—el componente que realmente renderiza lo que los usuarios ven cuando visitan una URL. Como un componente Svelte estándar con acceso completo a runes, imports, estilos y todas las características de Svelte, representa el punto final del sistema de enrutamiento de SvelteKit donde los datos se convierten en interfaz. Ya sea recibiendo datos de funciones de carga, respondiendo a interacciones del usuario o renderizando contenido dinámico, los componentes de página son donde la funcionalidad de tu aplicación se vuelve tangible.

Dominar +page.svelte significa entender su naturaleza dual: durante el SSR se renderiza en el servidor para proporcionar cargas iniciales rápidas, luego se hidrata en el navegador para convertirse en una aplicación completamente interactiva. Al manejar correctamente las props de datos con $props(), aprovechar la jerarquía de layouts para la UI compartida y usar la constante browser para la lógica específica del entorno, construyes páginas que funcionan en todas partes y se sienten rápidas y responsivas. La convención del prefijo + y el paso automático de props desde las funciones de carga hacen que la conexión entre enrutamiento, datos e UI sea fluida e intuitiva.

Puntos Clave

+page.svelte define qué se renderiza en una ruta - es un componente Svelte estándar que se convierte en el contenido de página que ven los usuarios
Recibe datos mediante $props() en Svelte 5 o export let data en Svelte 4, poblado automáticamente desde las funciones de carga de +page.js o +page.server.js
SSR habilitado por defecto - las páginas se renderizan primero en el servidor para cargas iniciales rápidas, luego se hidratan como componentes interactivos en el navegador
Capacidades completas de componente Svelte - usa runes ($state, $derived, $effect), imports, estilos y todas las características de Svelte
El prefijo + es obligatorio - SvelteKit solo reconoce los archivos que comienzan con + como archivos de ruta especiales
Usa la constante browser para verificaciones de entorno - de $app/environment para ejecutar código exclusivo del navegador de forma segura durante el SSR
Envuelto por la jerarquía de layouts - se renderiza dentro de los componentes +layout.svelte padre, heredando la estructura de UI compartida
Navegación automática del lado del cliente - cuando los usuarios navegan entre páginas, SvelteKit intercambia los componentes de página sin recargas completas de página

Ver También

Documentación Oficial de SvelteKit - +page.svelte
Runes de Svelte 5 - Reactividad con $state, $derived, $effect
+page.js - Carga universal de datos para páginas
+page.server.js - Carga de datos solo en el servidor
+layout.svelte - Entendiendo la jerarquía de layouts
SSR e Hidratación - Conceptos de renderizado del lado del servidor
Constante browser - Detección del entorno

¿Qué es +page.svelte?