SvelteKit

¿Qué es SvelteKit?

SvelteKit es un framework para crear aplicaciones web con Svelte. Svelte se ocupa de los componentes de interfaz, y SvelteKit añade lo que necesita una app completa: rutas basadas en archivos, carga de datos, endpoints de servidor y gestión de formularios. Las páginas pueden renderizarse en el servidor, en el navegador o al compilar, y se elige por ruta. Cumple para Svelte el papel que Next.js cumple para React y Nuxt para Vue.

El desarrollo funciona sobre Vite, de modo que los cambios de código aparecen en el navegador mediante hot module replacement.

Cómo funcionan el routing y la carga de datos

Las rutas salen de la estructura de carpetas bajo src/routes. Los archivos que empiezan por + definen el comportamiento de una ruta:

• +page.svelte es la página. Se renderiza en el servidor en la primera petición y en el navegador en las navegaciones posteriores.
• +page.js exporta una función load que se ejecuta en el servidor en el primer renderizado y en el navegador en la navegación del cliente.
• +page.server.js tiene un load que solo se ejecuta en el servidor, así que puede acceder a una base de datos o a variables de entorno privadas. También puede exportar form actions.
• +layout.svelte envuelve las páginas hijas con interfaz compartida, como la navegación.
• +server.js crea un endpoint de API exportando manejadores con el nombre de métodos HTTP, como GET y POST.

Una carpeta entre corchetes como src/routes/blog/[slug] coincide con un segmento dinámico, disponible como params.slug en load.

Opciones de renderizado

Tres opciones de página controlan cómo se renderiza una ruta. ssr está activada por defecto, así que las páginas se renderizan primero en el servidor (renderizado en el servidor). csr también lo está, y el HTML del servidor se vuelve interactivo en el navegador, un paso llamado hidratación. prerender convierte una ruta en HTML estático al compilar, es decir, generación de sitios estáticos. Con ssr en false en el layout raíz, la app pasa a ser una aplicación de una sola página (SPA), y con csr en false no se envía JavaScript al cliente.

Puedes combinarlas en una misma app: prerenderizar las páginas de marketing, renderizar un panel en el servidor y dejar una herramienta solo en el cliente.

Adapters: despliega donde quieras

Un adapter convierte la app compilada en algo que un host pueda ejecutar. La documentación de SvelteKit enumera adapters oficiales para servidores Node (adapter-node), salida totalmente estática (adapter-static), Vercel, Netlify, Cloudflare Workers y Pages, y Bun. Elige el adapter que corresponda al lugar donde se ejecutará la app, y recuerda que un adapter totalmente estático solo funciona si todas las rutas pueden prerenderizarse.

Form actions

Las form actions permiten que un archivo +page.server.js gestione envíos de <form> en el servidor. Usan POST y funcionan sin JavaScript en el cliente. Con use:enhance el formulario se envía con fetch sin recargar la página, con el mismo código de servidor. Para APIs JSON u otras peticiones que no sean formularios, usa un endpoint +server.js.

Errores comunes

• Poner secretos en un load universal (+page.js). También se ejecuta en el navegador, así que el acceso a bases de datos y las variables privadas van en +page.server.js.
• Prerenderizar una página con form actions. Según la documentación, esas páginas no pueden prerenderizarse.
• Elegir el adapter estático para una app con rutas dinámicas que no se pueden prerenderizar.
• Dejar trailingSlash en 'ignore'. /x y /x/ pasan a ser URL distintas, lo que según la documentación perjudica al SEO. El valor por defecto es 'never'.

SvelteKit, pruebas de carga y monitorización

Las rutas renderizadas en el servidor hacen trabajo real en cada petición: funciones load, consultas a la base de datos y renderizado de HTML. Ahí hay que mirar cuando crece el tráfico. Ejecuta una prueba de carga contra las rutas importantes, como la página de inicio, una página con muchos datos y tus endpoints +server.js, y observa el tiempo de respuesta y los errores al aumentar los usuarios virtuales. El artículo (en inglés) How to load test single-page applications cubre la parte pesada del navegador.

Tras el lanzamiento, la monitorización de APIs comprueba tus endpoints de forma programada, y la monitorización de velocidad de página sigue las Core Web Vitals para que una versión lenta se note pronto.

Preguntas frecuentes sobre SvelteKit

¿Cuál es la diferencia entre Svelte y SvelteKit?

Svelte es el framework de componentes para la interfaz. SvelteKit es el framework de aplicaciones que lo rodea y añade routing, carga de datos, renderizado en servidor, endpoints y adapters de despliegue.

¿SvelteKit usa renderizado en el servidor?

Sí, por defecto. Las páginas se renderizan en el servidor en la primera petición y luego se vuelven interactivas en el navegador. Puedes desactivarlo por ruta o para toda la app.

¿Puede SvelteKit crear un sitio estático?

Sí. Prerenderiza las rutas y usa el adapter estático. Solo funciona si todas las rutas pueden prerenderizarse, así que las páginas con datos en tiempo de petición o form actions necesitan otro adapter.

¿Dónde puedo desplegar una app SvelteKit?

Donde exista un adapter oficial o de la comunidad. Los oficiales cubren servidores Node, hosting estático, Vercel, Netlify, Cloudflare y Bun.

¿En qué se diferencia SvelteKit de Next.js y Nuxt?

La idea es la misma: un framework full-stack con routing y renderizado en servidor. Cambia la biblioteca de interfaz de base, Svelte en lugar de React o Vue.