Publicado · en mejora
Framework · Desde 2020
SvelteKit es el framework oficial para apps web con Svelte: enrutamiento por archivos, renderizado en servidor, carga de datos y despliegue flexible.
SvelteKit es el framework de aplicaciones oficial del equipo de Svelte; se presentó en 2020 y se desarrolla como código abierto. Se apoya en Svelte, que compila los componentes a JavaScript eficiente durante la compilación, y añade enrutamiento, renderizado en el servidor (SSR), carga de datos, manejo de formularios, compilación y despliegue; Vite se encarga del servidor de desarrollo y del empaquetado. La generación actual de Svelte expresa la reactividad mediante runas como $state, $derived, $effect y $props.
Su gran ventaja es que permite elegir la estrategia de renderizado en cada página. El contenido que es igual para todos, como artículos de blog y documentación, puede prerrenderizarse al compilar; las páginas personalizadas se renderizan en el servidor, y las vistas que dependen mucho de las API del navegador pueden renderizarse solo en el cliente. Las form actions funcionan sin JavaScript y se mejoran progresivamente, y cambiando de adaptador el mismo código se despliega en un servidor Node.js, en hosting estático o en plataformas como Vercel, Netlify y Cloudflare.
Para empezar, crea un proyecto con npx sv create y sigue el tutorial interactivo de svelte.dev, primero los fundamentos de Svelte y después SvelteKit. El material antiguo suele mostrar sintaxis y configuración que ya cambiaron, como export let, $lib o svelte.config.js, así que conviene aprender con la documentación oficial y la sintaxis actual de runas.
$state, $derived, $effect y $props hacen explícita la reactividad, y el compilador genera código que actualiza solo lo que cambia, sin DOM virtual.
La estructura de carpetas de src/routes es la estructura de URL; los archivos +page, +layout, +server y +error definen páginas, plantillas, API y errores.
Elige renderizado en servidor, en cliente o prerrenderizado para cada página con las opciones prerender, ssr y csr.
Obtén datos con funciones load tipadas automáticamente y modifícalos con form actions que funcionan incluso sin JavaScript.
El desarrollo con SvelteKit se hace sobre Node.js. Instala una versión LTS actual y, en una terminal nueva, comprueba que node y npm muestran su versión.
node --version && npm --versionUsa sv, la herramienta oficial de línea de comandos, para crear un proyecto. Podrás elegir plantilla, TypeScript e integraciones como Prettier, ESLint, Vitest y Playwright.
npx sv create my-appEntra en la carpeta del proyecto, instala las dependencias e inicia el servidor de desarrollo. El navegador abre http://localhost:5173 y los cambios aparecen al guardar.
cd my-app && npm install && npm run dev -- --opensrc/routes/+page.svelte es la página de inicio (/). La variable count, creada con la runa $state, actualiza la interfaz cada vez que cambia, y la función del atributo onclick la incrementa en cada clic. Para añadir páginas, crea carpetas como src/routes/about/+page.svelte.
src/routes/+page.svelte
<script lang="ts">
let count = $state(0);
</script>
<h1>Hello, SvelteKit!</h1>
<button onclick={() => count++}>
Clicked {count} times
</button>
npx sv create my-app && cd my-app && npm install && npm run devSeis capítulos que te llevan desde la instalación hasta las ideas clave de SvelteKit.
Haz preguntas, comparte tu experiencia e intercambia opiniones sobre SvelteKit.
Todavía no hay debates. Empieza el primero.
0 comentarios
Iniciar sesión · Inicia sesión para dejar un comentario.
Sé el primero en comentar.