0Pricing
Sveltejs Academy · Lección

Función load de +page.js

Exporte una función load para obtener o calcular datos antes de renderizar la página

Función load de +page.js es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.

Por qué usar funciones load

SvelteKit necesita saber qué datos requiere la página para poder obtenerlos antes de renderizarla. La función load se los proporciona.

Ubicación del archivo

Cree +page.js junto a +page.svelte, en la misma carpeta.

Exportar load

Exporte una función llamada load.

export async function load({ params, fetch }) {
  const res = await fetch("/api/items");
  return { items: await res.json() };
}

Se permite async

Las funciones load pueden ser async. SvelteKit espera a que terminen antes de renderizar.

Datos devueltos

Todo lo que devuelva se proporciona a la página como la prop data.

Usar fetch

Utilice el fetch proporcionado a la función load. Gestiona correctamente SSR y las credenciales.

Acceder a params

Los parámetros de las rutas dinámicas se encuentran en params.

export function load({ params }) { return { slug: params.slug }; }

Se ejecuta primero en el servidor

En las solicitudes iniciales, load se ejecuta en el servidor; en las navegaciones posteriores, en el cliente.

Universal frente a solo servidor

+page.js se ejecuta en ambos entornos; +page.server.js solo en el servidor.

Almacenamiento en caché

Utilice encabezados HTTP y la caché de la plataforma para que las funciones load sean eficientes.

Streaming

Devuelva promesas en propiedades anidadas para transmitir datos sin bloquear el HTML inicial.

Comprobación rápida

¿Qué devuelve load?

Resumen

Exporte load desde +page.js para obtener o calcular datos. El valor devuelto se convierte en la prop de datos de la página.

Preguntas frecuentes

¿La lección «Función load de +page.js» es gratis?

Sí — el texto completo de «Función load de +page.js» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Función load de +page.js»?

Exporte una función load para obtener o calcular datos antes de renderizar la página Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Sveltejs Academy?

No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Función load de +page.js»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?

Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Función load de +page.js
  2. Devolución de datos y uso de $page.data
  3. Gestión de errores en load
  4. +page.server.js para lógica exclusiva del servidor
← Volver a Sveltejs Academy