Implementa load functions para fetch de datos

Concepto clave

Las load functions en SvelteKit son funciones especiales que se ejecutan en el servidor (o en el cliente durante la navegación) para cargar datos antes de renderizar una página. Piensa en ellas como el "camarero" de tu aplicación: cuando un cliente llega al restaurante (tu sitio web), el camarero va a la cocina (servidor) a preparar los platos (datos) antes de sentar al cliente en la mesa (renderizar la página).

Esto es fundamental para aplicaciones performantes porque permite que SvelteKit pre-renderice páginas con datos ya disponibles, eliminando el "flash" de contenido vacío que ocurre cuando cargas datos desde el cliente. En el contexto full-stack, las load functions son tu puente entre el frontend y el backend, permitiendo fetch de datos desde APIs, bases de datos, o cualquier fuente externa antes de que el usuario vea la página.

Cómo funciona en la práctica

Para implementar una load function, sigue estos pasos:

1. Crea un archivo +page.server.js (o +page.server.ts) en la ruta de tu página SvelteKit
2. Exporta una función llamada load que recibe un objeto con parámetros como params, url, y fetch
3. La función debe devolver un objeto con los datos que quieres pasar al componente de la página
4. SvelteKit ejecutará esta función automáticamente y pasará los datos a tu componente mediante la prop data

Veamos un ejemplo básico: supongamos que tienes una página de blog en /blog/[slug]. La load function buscará el post correspondiente al slug antes de renderizar la página.

Código en acción

Primero, el "antes": cómo se haría sin load function (carga de datos en el cliente):

// En +page.svelte (NO RECOMENDADO para datos críticos)
<script>
  import { onMount } from 'svelte';
  let post = null;
  let loading = true;

  onMount(async () => {
    const response = await fetch(`/api/posts/${$params.slug}`);
    post = await response.json();
    loading = false;
  });
</script>

{#if loading}
  <p>Cargando...</p>
{:else}
  <h1>{post.title}</h1>
  <p>{post.content}</p>
{/if}

Ahora, el "después" con load function (carga en servidor):

// En /blog/[slug]/+page.server.js
export async function load({ params, fetch }) {
  const response = await fetch(`https://api.miblog.com/posts/${params.slug}`);
  
  if (!response.ok) {
    return { status: 404, error: 'Post no encontrado' };
  }

  const post = await response.json();
  
  return {
    post,
    meta: { title: post.title, description: post.excerpt }
  };
}

// En +page.svelte
<script>
  export let data;
</script>

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

Errores comunes

• No manejar errores en la load function: Siempre verifica el status de las respuestas HTTP y devuelve códigos de error apropiados usando return { status: 404 } o lanzando errores con error() de SvelteKit.
• Exponer datos sensibles: Recuerda que las load functions se ejecutan en el servidor, pero los datos que devuelven se envían al cliente. Nunca devuelvas contraseñas, tokens privados, o información sensible del servidor.
• No usar el fetch proporcionado: SvelteKit pasa un fetch especializado a las load functions que mantiene cookies y headers en SSR. Si usas fetch global, perderás esta funcionalidad.
• Cargas bloqueantes innecesarias: Si una load function hace múltiples fetch independientes, úsalos con Promise.all() para cargarlos en paralelo y mejorar el rendimiento.
• Olvidar que load functions pueden ejecutarse en cliente: Durante la navegación client-side, las load functions se ejecutan en el navegador. Asegúrate de que tu código funcione en ambos entornos o usa +page.server.js para forzar ejecución solo en servidor.

Checklist de dominio

• ✓ Sé crear una load function básica en +page.server.js que devuelva datos a un componente
• ✓ Sé manejar parámetros de ruta (params) y query strings (url.searchParams) en load functions
• ✓ Sé implementar manejo de errores con códigos HTTP (404, 500) en load functions
• ✓ Sé usar el fetch especializado que SvelteKit proporciona a las load functions
• ✓ Sé optimizar múltiples fetch con Promise.all() para cargas paralelas
• ✓ Sé diferenciar cuándo usar +page.server.js (solo servidor) vs +page.js (servidor y cliente)
• ✓ Sé pasar metadatos desde load functions para SEO (títulos, descripciones)

Implementa una load function para un dashboard de productos

Vas a crear un dashboard de productos que muestra una lista de productos y estadísticas. Sigue estos pasos:

1. Crea una nueva ruta en tu proyecto SvelteKit: /src/routes/dashboard/
2. Dentro de esta ruta, crea un archivo +page.server.js con una load function que:
   • Haga fetch a dos endpoints simultáneamente:
     1) https://api.tutienda.com/products (lista de productos)
     2) https://api.tutienda.com/stats (estadísticas)
   • Use Promise.all() para cargarlos en paralelo
   • Maneje el caso de error: si alguna petición falla, devuelve { status: 500, error: 'Error cargando datos' }
   • Devuelva un objeto con: { products, stats, lastUpdated: new Date().toISOString() }
3. Crea el componente +page.svelte que:
   • Reciba los datos mediante export let data
   • Muestre la lista de productos en una tabla con nombre, precio y categoría
   • Muestre las estadísticas en tarjetas separadas (total productos, valor promedio, etc.)
   • Muestre la fecha de última actualización
   • Maneje el estado de carga/error apropiadamente
4. Verifica que la página se renderiza correctamente sin "flash" de contenido vacío

Pistas

• Recuerda que el fetch que recibe la load function ya está adaptado para SSR. Úsalo en lugar de fetch global.
• Puedes usar destructuring en Promise.all: const [productsResponse, statsResponse] = await Promise.all([...])
• Para simular los endpoints, puedes crear archivos JSON locales y servirlos con un endpoint de SvelteKit o usar servicios como JSONPlaceholder.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.