Carga de Datos Solo en el Servidor

A veces necesitas capacidades que solo existen en el servidor: consultas a bases de datos, claves de API privadas, acceso al sistema de archivos o lógica de negocio sensible. El archivo +page.server.js (o +page.server.ts) proporciona carga de datos exclusiva del servidor que nunca se ejecuta en el navegador.

La distinción respecto a +page.js es absoluta, no una convención. Los archivos que terminan en .server.js son excluidos del bundle del cliente en el momento de la compilación. Vite los elimina físicamente antes de enviar JavaScript al navegador. Esto significa que tus credenciales de base de datos, claves de API privadas y lógica de negocio interna no pueden filtrarse al cliente bajo ninguna circunstancia — simplemente no están en el bundle.

La consecuencia práctica: en +page.server.js, puedes importar libremente desde $lib/server/, usar $env/static/private, llamar a cookies.get() y consultar tu base de datos directamente. Nada de eso llega al cliente. Los datos que retornas sí viajan por la red (serializados como JSON), pero el código que los produce permanece en el servidor.

Si no estás seguro de usar +page.js o +page.server.js, elige .server. Siempre puedes cambiar a carga universal más adelante si descubres que necesitas navegación instantánea del lado del cliente para esa ruta. Optar por la carga exclusiva del servidor es la elección más segura.

Cuándo Usar la Carga Solo en el Servidor

Usa +page.server.js cuando necesites:

Acceso a bases de datos - Consultas directas sin exponer cadenas de conexión
Claves de API privadas - Servicios de terceros que requieren autenticación
Operaciones con el sistema de archivos - Lectura de archivos desde el disco
Lógica de negocio sensible - Cálculos o validaciones que no quieres exponer
Acceso a cookies o datos de sesión - A través de los objetos cookies y locals

Tu Primera Función de Carga en el Servidor

// src/routes/dashboard/+page.server.ts
import type { PageServerLoad } from './$types'
import { db } from '$lib/server/database'
import { PRIVATE_API_KEY } from '$env/static/private'

export const load: PageServerLoad = async ({ locals }) => {
	// This code NEVER runs in the browser
	// It's completely safe to use secrets here

	// Direct database access
	const user = await db.users.findUnique({
		where: { id: locals.userId }
	})

	// Private API calls
	const analyticsResponse = await fetch('https://api.analytics.com/data', {
		headers: {
			Authorization: `Bearer ${PRIVATE_API_KEY}`
		}
	})
	const analytics = await analyticsResponse.json()

	return {
		user: {
			name: user.name,
			email: user.email
			// Don't expose sensitive fields like passwordHash!
		},
		analytics
	}
}

Consumir Datos en Componentes con Runes de Svelte 5

Cuando tu +page.server.ts retorna datos, los accedes en tu componente +page.svelte usando el rune $props(). Entender cómo manejar correctamente estos datos con el sistema de reactividad de Svelte 5 es fundamental.

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

	// PageProps automatically types both 'data' and 'form'
	let { data }: PageProps = $props()
</script>

<h1>Welcome, {data.user.name}</h1>

Por Qué Importa la Reactividad

El Patrón de Reutilización de Componentes

SvelteKit reutiliza los componentes de página durante la navegación del lado del cliente en lugar de destruirlos y recrearlos. Cuando navegas de /dashboard a /dashboard?filter=active, o de /blog/post-a a /blog/post-b si comparten el mismo layout, el componente permanece montado y solo la prop data se actualiza con valores nuevos.

Esto es intencional y beneficioso — evita el reordenamiento del layout, mantiene las animaciones fluidas y preserva el estado local como la posición del scroll y los menús desplegables abiertos. Pero tiene una consecuencia importante: cualquier valor calculado derivado de data debe ser reactivo, o mostrará datos desactualizados después de la navegación.

En Svelte 5, los valores calculados a partir de props que necesitan mantenerse actualizados pertenecen a $derived(). Las asignaciones de variables simples se ejecutan una sola vez al crear el componente y no se actualizan cuando las props cambian:

<!-- AVOID: Plain assignment runs once on component creation.
     After client-side navigation updates data, these values stay stale. -->
<script lang="ts">
	import type { PageProps } from './$types'

	let { data }: PageProps = $props()

	const postCount = data.posts.length // frozen at mount
	const featuredPost = data.posts.find((p) => p.featured) // frozen at mount
</script>

<!-- PREFERRED: $derived recomputes whenever data changes, including during navigation. -->
<script lang="ts">
	import type { PageProps } from './$types'

	let { data }: PageProps = $props()

	let postCount = $derived(data.posts.length)
	let featuredPost = $derived(data.posts.find((p) => p.featured))
	let hasMultiplePosts = $derived(postCount > 1)
	let featuredTitle = $derived(featuredPost?.title ?? 'No featured post')
</script>

<h1>Blog ({postCount} posts)</h1>

{#if featuredPost}
	<article class="featured">
		<h2>{featuredTitle}</h2>
	</article>
{/if}

{#if hasMultiplePosts}
	<p>Browse our collection of articles</p>
{/if}

Si un valor se calcula a partir de data (o cualquier prop), envuélvelo en $derived(). Esto garantiza que tu UI se mantenga sincronizada durante la navegación.

Diferencias Clave con `+page.js`

Característica	`+page.js`	`+page.server.js`
Se ejecuta en el servidor	Sí (inicial)	Sí (siempre)
Se ejecuta en el navegador	Sí (navegación)	Nunca
Acceso a bases de datos	No	Sí
Variables de entorno privadas	No	Sí
Acceso al sistema de archivos	No	Sí
Acceso a `cookies`	No	Sí
Acceso a `locals`	No	Sí
Navegación del lado del cliente	Instantánea (caché)	Requiere servidor

Parámetros Exclusivos del Servidor

La función load en +page.server.js tiene acceso a parámetros adicionales exclusivos del servidor:

export const load: PageServerLoad = async ({
	params, // Route parameters
	url, // URL object
	fetch, // Server-side fetch with special powers
	cookies, // Read and write cookies
	locals, // Data from hooks.server.ts
	request, // The original Request object
	platform, // Platform-specific context (Vercel, Cloudflare, etc.)
	setHeaders // Set response headers
}) => {
	// Your server-only logic
}

Trabajando con Cookies

Las cookies son pequeños fragmentos de datos almacenados por el navegador y enviados con cada solicitud a tu servidor. Se usan comúnmente para autenticación (sesiones), preferencias del usuario e información de seguimiento que necesita persistir entre solicitudes o entre sesiones del navegador.

En SvelteKit, solo puedes leer y escribir cookies en código del lado del servidor — como +page.server.ts, +layout.server.ts o archivos de endpoints — porque las cookies forman parte del ciclo de solicitud/respuesta HTTP.

// src/routes/dashboard/+page.server.ts
import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async ({ cookies }) => {
	// Read a cookie
	const sessionId = cookies.get('session')

	// Validate session and get user
	const user = await validateSession(sessionId)

	return { user }
}

Al configurar cookies, usa las opciones httpOnly, secure y sameSite para mejorar la seguridad. Por ejemplo, httpOnly impide que JavaScript acceda a la cookie, reduciendo el riesgo de ataques XSS.

Usando `locals` desde Hooks

El objeto locals se llena en tu archivo hooks.server.ts y está disponible en todas las funciones de carga del servidor. Este es el patrón recomendado para compartir datos como información del usuario autenticado en toda tu aplicación.

// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit'
import { getUserFromSession } from '$lib/server/auth'

export const handle: Handle = async ({ event, resolve }) => {
	// Populate locals with user data - runs on every request
	const session = event.cookies.get('session')
	event.locals.user = await getUserFromSession(session)

	return resolve(event)
}

// src/routes/profile/+page.server.ts
import type { PageServerLoad } from './$types'
import { redirect } from '@sveltejs/kit'

export const load: PageServerLoad = async ({ locals }) => {
	// Access the user set in hooks
	if (!locals.user) {
		redirect(303, '/login')
	}

	return {
		user: locals.user
	}
}

Guards de Autenticación Reutilizables con `getRequestEvent`

Para aplicaciones más grandes, querrás lógica de autenticación reutilizable. La función getRequestEvent (de $app/server) te permite acceder a la solicitud actual desde cualquier lugar en tu código del servidor:

// src/lib/server/auth.ts
import { redirect } from '@sveltejs/kit'
import { getRequestEvent } from '$app/server'

/**
 * Reusable auth guard - call from any server load function or form action.
 * Redirects to login if user is not authenticated.
 * @returns The authenticated user (guaranteed non-null)
 */
export function requireAuth() {
	const { locals, url } = getRequestEvent()

	if (!locals.user) {
		// Preserve intended destination for post-login redirect
		const redirectTo = url.pathname + url.search
		const params = new URLSearchParams({ redirectTo })
		redirect(303, `/login?${params}`)
	}

	return locals.user
}

/**
 * Check if user has a specific role
 */
export function requireRole(role: 'admin' | 'editor' | 'user') {
	const user = requireAuth() // First ensure they're logged in

	if (user.role !== role && user.role !== 'admin') {
		redirect(303, '/unauthorized')
	}

	return user
}

Ahora tus funciones de carga se vuelven limpias y declarativas:

// src/routes/admin/+page.server.ts
import type { PageServerLoad } from './$types'
import { requireRole } from '$lib/server/auth'
import { db } from '$lib/server/database'

export const load: PageServerLoad = async () => {
	// Throws redirect if not admin - no need to check return value
	const admin = requireRole('admin')

	// If we reach here, user is guaranteed to be an admin
	const stats = await db.getAdminStats()

	return {
		admin: { name: admin.name, email: admin.email },
		stats
	}
}

El Requisito de Serialización

Los datos retornados desde +page.server.js deben viajar del servidor al cliente a través de la red. El código permanece en el servidor, pero los datos deben ser serializables — convertibles a un formato que pueda incrustarse en HTML o enviarse como JSON y luego reconstruirse en el navegador.

Por eso no puedes retornar funciones desde una función de carga del servidor. Una función es código ejecutable; no puede serializarse en bytes que viajen por HTTP y luego reconstruirse en el otro extremo. Retorna el resultado de llamar a las funciones, no las funciones en sí.

// AVOID Functions can't be serialized
export const load: PageServerLoad = async () => {
	return {
		calculateTotal: (items) => items.reduce((a, b) => a + b, 0)
	}
}

// PREFERRED: Return data, not functions
export const load: PageServerLoad = async () => {
	const items = await getItems()
	return {
		items,
		total: items.reduce((a, b) => a + b.price, 0)
	}
}

¿Qué Puede Serializarse?

SvelteKit usa devalue para la serialización, que soporta más que JSON plano:

Tipo/Característica	¿Serializable?	Notas
Strings, números, booleanos, null, undefined	Sí	Primitivos básicos
Arrays, objetos planos (anidados)	Sí	Soporta anidamiento profundo
Fechas (objetos Date)	Sí	Las fechas se preservan como objetos Date
Maps, Sets	Sí	Soportado
BigInt	Sí	Soportado
Expresiones regulares	Sí	Soportado
Referencias repetidas/cíclicas	Sí	Soportado
Funciones	No	No serializable
Clases con métodos	No	Solo sobreviven los datos planos
Symbols	No	No serializable

Serialización de Tipos Personalizados con `transport`

Para clases personalizadas (como Decimal para cálculos financieros), usa el hook transport:

// src/hooks.ts
import type { Transport } from '@sveltejs/kit'
import { Decimal } from 'decimal.js'

export const transport: Transport = {
	Decimal: {
		// encode runs on the server - return false/null/undefined to skip
		encode: (value) => value instanceof Decimal && value.toString(),
		// decode runs on the client - reconstruct the instance
		decode: (str) => new Decimal(str)
	}
}

Ahora puedes retornar instancias de Decimal desde tus funciones de carga:

// src/routes/invoice/+page.server.ts
export const load: PageServerLoad = async ({ params }) => {
	const invoice = await db.invoices.findUnique({ where: { id: params.id } })

	return {
		invoice: {
			...invoice,
			// This Decimal instance will survive the server→client journey
			total: new Decimal(invoice.total)
		}
	}
}

Streaming con Promesas

Si tienes datos que tardan en cargarse y no son esenciales para el renderizado inicial de la página, puedes transmitirlos al navegador. Al retornar la promesa sin esperarla, SvelteKit renderizará el contenido principal de inmediato y cargará los datos lentos en segundo plano.

// src/routes/dashboard/+page.server.ts
import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async ({ locals }) => {
	// Fast, critical data - AWAIT this
	const user = await db.users.findUnique({
		where: { id: locals.userId }
	})

	// Slow, non-critical data - DON'T await, let it stream
	const analyticsPromise = fetchSlowAnalytics(locals.userId)
	const recommendationsPromise = generateRecommendations(locals.userId)

	return {
		user, // Available immediately
		analytics: analyticsPromise, // Streams in later
		recommendations: recommendationsPromise // Streams in later
	}
}

Maneja los datos transmitidos en tu componente con {#await}:

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

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

<!-- This renders immediately -->
<h1>Welcome back, {data.user.name}</h1>

<!-- Analytics streams in with loading state -->
<section class="analytics">
	{#await data.analytics}
		<div class="skeleton">
			<p>Loading analytics...</p>
		</div>
	{:then analytics}
		<h2>Your Stats</h2>
		<p>Page views: {analytics.pageViews}</p>
		<p>Conversions: {analytics.conversions}</p>
	{:catch error}
		<div class="error">
			<p>Failed to load analytics: {error.message}</p>
		</div>
	{/await}
</section>

El streaming es excelente para dashboards, análisis y contenido secundario. El usuario ve el layout de la página de inmediato mientras los datos más lentos se van cargando progresivamente.

Combinando con `+page.js`

Puedes tener tanto +page.js como +page.server.js para la misma ruta. Cuando lo haces:

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

// src/routes/blog/+page.server.ts
import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async () => {
	const posts = await db.posts.findMany()
	return { posts }
}

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

export const load: PageLoad = async ({ data }) => {
	// `data` contains { posts } from +page.server.ts

	return {
		posts: data.posts,
		// Add client-side only data
		viewedAt: new Date().toISOString(),
		// Or transform the data
		postCount: data.posts.length
	}
}

Accediendo a los Datos de Página desde Cualquier Lugar con `$app/state`

El objeto page de $app/state proporciona un store global y reactivo que contiene todos los datos retornados desde tu página actual y los layouts, así como la URL actual y el estado de navegación. Esto significa que cualquier componente puede acceder a los datos de página actualizados sin necesidad de prop drilling.

<!-- src/lib/components/UserBadge.svelte -->
<script lang="ts">
	import { page } from '$app/state'

	// Access combined data from all layouts and current page
	// IMPORTANT: Use $derived since page is reactive
	let userName = $derived(page.data.user?.name ?? 'Guest')
	let isAdmin = $derived(page.data.user?.role === 'admin')
</script>

<div class="badge">
	<span>{userName}</span>
	{#if isAdmin}
		<span class="admin-badge">Admin</span>
	{/if}
</div>

Los cambios en page solo son reactivos cuando se acceden a través de $derived(). Siempre usa runes para la reactividad con el objeto page.

Acciones de Formulario: Manejando Solicitudes POST

+page.server.js también puede exportar acciones para manejar envíos de formularios. Este es el enfoque recomendado por SvelteKit para mutaciones (crear, actualizar, eliminar datos).

// src/routes/contact/+page.server.ts
import type { Actions, PageServerLoad } from './$types'
import { fail } from '@sveltejs/kit'
import { db } from '$lib/server/database'

export const actions: Actions = {
	default: async ({ request }) => {
		const formData = await request.formData()
		const email = formData.get('email')
		const message = formData.get('message')

		// Validate
		if (!email) {
			return fail(400, {
				error: 'Email is required',
				email: '',
				message: message?.toString() ?? ''
			})
		}

		if (!message) {
			return fail(400, {
				error: 'Message is required',
				email: email.toString(),
				message: ''
			})
		}

		// Save to database
		await db.messages.create({
			data: {
				email: email.toString(),
				message: message.toString()
			}
		})

		return { success: true }
	}
}

Mejora Progresiva con `use:enhance`

Los formularios de SvelteKit funcionan sin JavaScript, pero puedes mejorarlos progresivamente para una mejor experiencia de usuario. La acción use:enhance evita las recargas completas de página mientras mantiene todos los beneficios de la validación del lado del servidor.

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

	let { form }: PageProps = $props()

	// Local UI state for submission feedback
	let isSubmitting = $state(false)

	// Derived values for cleaner template logic
	let hasError = $derived(!!form?.error)
	let wasSuccessful = $derived(!!form?.success)
</script>

{#if wasSuccessful}
	<div class="success" role="alert">
		<p>✓ Message sent successfully!</p>
	</div>
{/if}

{#if hasError}
	<div class="error" role="alert">
		<p>✗ {form.error}</p>
	</div>
{/if}

<form
	method="POST"
	use:enhance={() => {
		isSubmitting = true

		return async ({ update }) => {
			await update()
			isSubmitting = false
		}
	}}
>
	<div class="field">
		<label for="email">Email</label>
		<input
			id="email"
			name="email"
			type="email"
			value={form?.email ?? ''}
			disabled={isSubmitting}
			required
		/>
	</div>

	<div class="field">
		<label for="message">Message</label>
		<textarea id="message" name="message" disabled={isSubmitting} required
			>{form?.message ?? ''}</textarea
		>
	</div>

	<button type="submit" disabled={isSubmitting}>
		{#if isSubmitting}
			Sending...
		{:else}
			Send Message
		{/if}
	</button>
</form>

<style>
	.success {
		padding: 1rem;
		background: #d4edda;
		border: 1px solid #c3e6cb;
		border-radius: 4px;
		color: #155724;
	}

	.error {
		padding: 1rem;
		background: #f8d7da;
		border: 1px solid #f5c6cb;
		border-radius: 4px;
		color: #721c24;
	}

	button:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}
</style>

Acciones con Nombre

Cuando tu página necesita soportar múltiples tipos de envíos de formularios, puedes definir acciones con nombre. Cada acción con nombre es una función identificada por su nombre, y las apuntas desde tu formulario usando el atributo action.

// src/routes/posts/[id]/+page.server.ts
import type { Actions } from './$types'
import { db } from '$lib/server/database'
import { redirect } from '@sveltejs/kit'

export const actions: Actions = {
	update: async ({ params, request }) => {
		const formData = await request.formData()
		await db.posts.update({
			where: { id: params.id },
			data: { title: formData.get('title')?.toString() }
		})
		return { success: true }
	},

	delete: async ({ params }) => {
		await db.posts.delete({ where: { id: params.id } })
		redirect(303, '/posts')
	}
}

<!-- src/routes/posts/[id]/+page.svelte -->
<script lang="ts">
	import type { PageProps } from './$types'
	import { enhance } from '$app/forms'

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

<!-- Edit form targets the 'update' action -->
<form method="POST" action="?/update" use:enhance>
	<input name="title" value={data.post.title} />
	<button type="submit">Save</button>
</form>

<!-- Delete form targets the 'delete' action -->
<form method="POST" action="?/delete" use:enhance>
	<button type="submit">Delete Post</button>
</form>

Usa acciones con nombre para cualquier página con más de un formulario o tipo de mutación. Esto mantiene tu código organizado y explícito.

Buenas Prácticas de Seguridad

No Expongas Datos Sensibles

Siempre sé intencional sobre lo que envías al cliente. Exponer accidentalmente campos sensibles es un riesgo de seguridad común y grave.

// AVOID: Exposing the entire user object
export const load: PageServerLoad = async ({ locals }) => {
	const user = await db.users.findUnique({
		where: { id: locals.userId }
	})
	return { user } // Includes passwordHash, internalNotes, etc!
}

// PREFERRED: Explicitly select only what the client needs
export const load: PageServerLoad = async ({ locals }) => {
	const user = await db.users.findUnique({
		where: { id: locals.userId },
		select: {
			id: true,
			name: true,
			email: true,
			avatar: true
		}
	})
	return { user }
}

Valida los Permisos del Usuario

Siempre aplica verificaciones de autenticación y autorización en el servidor. Las verificaciones del lado del cliente pueden ser evadidas.

import { error, redirect } from '@sveltejs/kit'

export const load: PageServerLoad = async ({ locals, params }) => {
	// Check authentication
	if (!locals.user) {
		redirect(303, '/login')
	}

	// Fetch the resource
	const post = await db.posts.findUnique({
		where: { id: params.id }
	})

	// Check it exists
	if (!post) {
		error(404, 'Post not found')
	}

	// Check authorization
	if (post.authorId !== locals.user.id && locals.user.role !== 'admin') {
		error(403, 'You do not have permission to view this post')
	}

	return { post }
}

Manejo de Errores con Seguridad de Tipos

Define las formas de tus errores en src/app.d.ts para seguridad de tipos y consistencia:

// src/app.d.ts
declare global {
	namespace App {
		interface Error {
			message: string
			code?: string
			details?: Record<string, string>
		}
		interface Locals {
			user?: {
				id: string
				name: string
				email: string
				role: 'admin' | 'editor' | 'user'
			}
		}
	}
}

export {}

Cuándo Elegir Cuál

Usa `+page.js` cuando...	Usa `+page.server.js` cuando...
Los datos provienen de APIs públicas	Necesitas acceso a la base de datos
No hay secretos involucrados	Usas claves de API privadas
Quieres navegación instantánea del lado cliente	Los datos deben permanecer en el servidor
Los datos pueden exponerse de forma segura	Tienes lógica de negocio sensible
Necesitas APIs exclusivas del navegador	Necesitas cookies o datos de sesión

Conclusión

El archivo +page.server.js es el límite de seguridad de SvelteKit: el lugar donde las operaciones sensibles permanecen de forma segura en el servidor, nunca expuestas al navegador. Al ejecutar las funciones de carga exclusivamente en el servidor tanto durante el SSR como en la navegación del lado del cliente, permite el acceso directo a bases de datos, claves de API privadas y lógica de negocio que debe mantenerse confidencial.

Este modelo de ejecución exclusiva en el servidor transforma la carga de datos de una preocupación de seguridad en una conveniencia de desarrollo, permitiéndote escribir consultas de base de datos y llamadas a API de forma directa sin preocuparte por la exposición de credenciales.

Dominar +page.server.js significa entender el conjunto completo de herramientas del servidor: acceder a cookies para autenticación, aprovechar locals para datos con alcance de solicitud, hacer streaming de promesas para renderizado progresivo, y combinar funciones de carga con acciones de formulario para operaciones CRUD completas. Cuando se combina con la reactividad adecuada usando $derived() para valores computados y $state() para el estado del componente, los datos cargados desde el servidor fluyen naturalmente a través de la navegación mientras mantienen las garantías de seguridad que protegen tu aplicación.

La clave está en saber cuándo usar la carga exclusiva del servidor versus la carga universal: usa +page.server.js cuando estén involucradas la seguridad o APIs específicas del servidor, y +page.js cuando quieras navegación instantánea del lado del cliente con datos públicos.

Puntos Clave

+page.server.js proporciona carga de datos exclusiva del servidor que nunca se ejecuta en el navegador, ideal para acceso a bases de datos, claves de API privadas y lógica de negocio sensible
Usa $derived() para valores computados a partir de props data para mantener la reactividad durante la navegación del lado del cliente en Svelte 5
Usa $state() para el estado local del componente como indicadores de carga, valores de formulario o toggles de UI que no provienen del servidor
getRequestEvent() permite guards de autenticación reutilizables y lógica de servidor compartida al proporcionar acceso a cookies, locals y contexto de solicitud desde cualquier lugar
Los datos deben ser serializables - solo tipos compatibles con JSON; usa el hook transport para personalizar la serialización de Dates, Maps o clases personalizadas
El streaming de promesas permite el renderizado progresivo - retorna promesas directamente desde load para renderizar el shell de la página de inmediato mientras los datos lentos se cargan en segundo plano
Las acciones de formulario con use:enhance proporcionan mejora progresiva para mutaciones, funcionando sin JavaScript mientras se sienten como interacciones de SPA
$app/state proporciona acceso a datos desde cualquier lugar - lee datos de página desde cualquier componente sin prop drilling usando el rune page

Ver También

Documentación Oficial de SvelteKit - +page.server.js
Acciones de Formulario - Manejo de formularios del lado del servidor
cookies - Sesión y autenticación
Contexto de la Función Load - Entendiendo locals, params, platform
Streaming con Promesas - Patrones de renderizado progresivo
getRequestEvent() - Accediendo al contexto de solicitud