Quiz: Conceptos clave de SvelteKit

Tipo de lección: Quiz

Concepto clave: Arquitectura híbrida de SvelteKit

SvelteKit es un framework full-stack que combina renderizado en el servidor (SSR) y en el cliente (CSR) de forma inteligente. Imagina un restaurante donde la cocina (servidor) prepara los platos base, y los meseros (cliente) los personalizan al gusto del cliente. Esta arquitectura híbrida permite que las páginas se carguen rápidamente desde el servidor, pero luego se vuelvan interactivas en el navegador.

La clave está en el enrutamiento basado en archivos: cada archivo +page.svelte representa una ruta, y puedes acompañarlo con +page.server.js para lógica del servidor o +page.js para lógica compartida. Esto crea una separación natural entre lo que ocurre en el servidor (seguro, rápido) y en el cliente (interactivo).

Cómo funciona en la práctica

Cuando un usuario visita tu aplicación SvelteKit, el servidor procesa la solicitud, ejecuta cualquier load function en el servidor, y envía HTML renderizado. Luego, el cliente hidrata la página, convirtiendo ese HTML estático en componentes Svelte interactivos.

Paso a paso: 1) El navegador solicita /productos. 2) SvelteKit busca src/routes/productos/+page.svelte. 3) Si existe +page.server.js, ejecuta su función load para obtener datos. 4) Renderiza el componente con esos datos. 5) Envía HTML completo al navegador. 6) El cliente carga el JavaScript y hace la página interactiva.

Código en acción

Antes: Solo cliente, lenta primera carga:

// En un SPA tradicional, todo se carga en el cliente
// src/routes/productos/+page.svelte
<script>
  let productos = [];
  onMount(async () => {
    const res = await fetch('/api/productos');
    productos = await res.json();
  });
</script>

<ul>
  {#each productos as producto}
    <li>{producto.nombre}</li>
  {/each}
</ul>

Después: Con SvelteKit, renderizado en servidor para mejor performance:

// src/routes/productos/+page.server.js
export async function load({ fetch }) {
  const res = await fetch('https://api.mitienda.com/productos');
  const productos = await res.json();
  return { productos };
}

// src/routes/productos/+page.svelte
<script>
  export let data;
  let productos = data.productos;
</script>

<ul>
  {#each productos as producto}
    <li>{producto.nombre}</li>
  {/each}
</ul>

Errores comunes

• Mezclar lógica de servidor y cliente: Usar window o document en +page.server.js. Solución: Mover esa lógica a onMount en el componente.
• No optimizar la hidratación: Cargar demasiado JavaScript innecesario. Usa <svelte:head> para recursos críticos y considera export const ssr = false para páginas muy interactivas.
• Ignorar el manejo de errores: No implementar +error.svelte para rutas. Crea un archivo de error en cada carpeta de rutas para fallos específicos.
• Mal uso de fetch en load functions: No pasar el fetch nativo en funciones load del servidor. En +page.server.js

Checklist de dominio

1. Entiendo la diferencia entre +page.server.js y +page.js.
2. Puedo explicar qué es la hidratación y por qué mejora el SEO.
3. He creado al menos una ruta con datos cargados desde el servidor.
4. Sé cómo manejar errores con archivos +error.svelte.
5. Puedo optimizar una página desactivando SSR cuando es necesario.
6. He usado <svelte:head> para gestionar metadatos.
7. Comprendo cómo SvelteKit decide renderizar en servidor o cliente.

Configura una página de productos con Server Actions

En este ejercicio, crearás una página de productos que use Server Actions para manejar un formulario de búsqueda. Sigue estos pasos:

1. Crea una nueva ruta en src/routes/productos/+page.svelte con un formulario de búsqueda simple.
2. Implementa un archivo src/routes/productos/+page.server.js con una función load que cargue una lista inicial de productos desde una API simulada.
3. Añade una Server Action en el mismo +page.server.js para manejar la búsqueda. Usa actions export.
4. Conecta el formulario a la Server Action usando el atributo method="POST" y maneja la respuesta para mostrar resultados filtrados.
5. Agrega un archivo +error.svelte en la carpeta productos para manejar fallos en la carga de datos.

Objetivo: Que la página cargue productos desde el servidor y permita búsquedas sin recargar completamente.

Pistas

• Usa export let form en el componente para acceder a los datos del formulario después de una acción.
• En la Server Action, valida los datos de entrada y devuelve un objeto con los productos filtrados.
• Considera usar enhance de SvelteKit para mejorar la experiencia del formulario sin JavaScript completo.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.