Quiz: Conceptos clave de SvelteKit

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.