Lanzamiento oficial de SvelteKit 1.0: una nueva forma de crear aplicaciones Web

¡SvelteKit 1.0 ya está aquí!

En diciembre de 2022, el equipo de Svelte anunció oficialmente el lanzamiento de SvelteKit 1.0. Fue un hito tanto para la comunidad de Svelte como para todo el ámbito del frontend. SvelteKit ya no es simplemente «el Next.js o Nuxt.js de Svelte»: incorpora una filosofía de diseño propia y distintiva, y pretende ofrecer una forma más sencilla, flexible y eficiente de crear aplicaciones Web.

¿Qué es SvelteKit?

Si conoces Svelte, probablemente sepas que Svelte en sí es un framework de componentes. Mediante un compilador radical, transforma tus archivos .svelte en código JavaScript imperativo y eficiente durante la compilación, logrando un rendimiento extraordinario y una sobrecarga en tiempo de ejecución extremadamente pequeña.

SvelteKit, por su parte, es un framework de aplicaciones construido sobre Svelte. Se ocupa de todo lo necesario para crear una aplicación completa: enrutamiento, renderización del lado del servidor (SSR), carga de datos, adaptadores de despliegue y mucho más, para que puedas centrarte en desarrollar la lógica de negocio.

Resumen de sus características principales

1. Enrutamiento basado en el sistema de archivos

Al igual que Next.js, SvelteKit genera automáticamente las rutas a partir de la estructura de tu sistema de archivos. La estructura de archivos del directorio src/routes se corresponde directamente con las URLs de la aplicación.

• src/routes/+page.svelte -> /
• src/routes/about/+page.svelte -> /about
• src/routes/blog/[slug]/+page.svelte -> /blog/some-post

Este enfoque de convención sobre configuración simplifica enormemente la gestión de rutas.

2. Modos de renderización flexibles

SvelteKit permite controlar con precisión el modo de renderización a nivel de página. La renderización del lado del servidor (SSR), la generación de sitios estáticos (SSG) o una combinación de ambas se pueden implementar en la misma aplicación. Incluso puedes desactivar SSR para una sola página y convertirla en una aplicación de página única (SPA) puramente del lado del cliente.

3. La función load universal

SvelteKit unifica el modelo de carga de datos. Junto a cada página o diseño, puedes crear un archivo +page.js o +page.server.js y exportar una función load.

• En +page.js, la función load se ejecuta tanto en el servidor como en el cliente.
• En +page.server.js, la función load se ejecuta únicamente en el servidor, por lo que puedes acceder de forma segura a una base de datos o API privada.

Los datos devueltos por la función load se pasan automáticamente al componente +page.svelte correspondiente.

// src/routes/blog/[slug]/+page.server.js
import * as db from '$lib/server/database';

export async function load({ params }) {
  const post = await db.getPost(params.slug);
  return { post };
}

4. Adaptadores

«Escribe una vez, despliega en cualquier lugar» es una de las promesas fundamentales de SvelteKit. Mediante los adaptadores, SvelteKit puede empaquetar tu aplicación en el formato adecuado para cualquier plataforma de destino.

• @sveltejs/adapter-node: Para desplegar en un servidor Node.js tradicional.
• @sveltejs/adapter-vercel: Adapta la aplicación a la plataforma Vercel.
• @sveltejs/adapter-static: Prerenderiza toda la aplicación como archivos estáticos, adecuados para cualquier alojamiento estático.
• También existen más adaptadores oficiales y de la comunidad para plataformas como Netlify y Cloudflare Workers.

Conclusión

El lanzamiento de SvelteKit 1.0 marcó la madurez del ecosistema Svelte. Combina el rendimiento extremo del compilador de Svelte con un framework de aplicaciones cuidadosamente diseñado, y ofrece a los desarrolladores una experiencia potente y agradable. Si buscas un framework versátil capaz de crear desde páginas estáticas sencillas hasta aplicaciones dinámicas complejas, sin duda merece la pena probar SvelteKit.