Consumir datos de una API y mostrarlos en pantalla es una de las tareas más frecuentes en cualquier aplicación web moderna. Svelte simplifica este proceso gracias a su manejo del ciclo de vida de los componentes, que permite ejecutar lógica justo después de que un componente se monta en el DOM. A continuación se explica paso a paso cómo lograrlo de forma práctica.
¿Qué es el ciclo de vida de un componente en Svelte?
Cada componente en Svelte tiene un ciclo de vida que inicia cuando se crea y termina cuando se destruye [0:01]. Dentro de ese ciclo existen momentos clave en los que podemos ejecutar código. El más utilizado para peticiones a APIs es onMount, un método que Svelte provee de forma nativa y que se ejecuta justo después de que el componente se ha renderizado por primera vez [0:42].
Para utilizarlo basta con importarlo directamente desde Svelte:
javascript
import { onMount } from 'svelte';
Este método recibe una función (puede ser asíncrona) que contiene la lógica que queremos ejecutar una vez el componente esté listo.
¿Cómo hacer una petición a una API dentro de onMount?
El primer paso es crear una variable reactiva donde almacenar los datos. En este ejemplo se trabaja con un arreglo de fotografías [0:56]:
javascript
let photos = [];
Después se usa onMount con una función async para hacer el llamado con fetch [1:10]:
javascript
onMount(async () => {
console.log('onMount');
const response = await fetch(
'https://jsonplaceholder.typicode.com/photos?_limit=20'
);
photos = await response.json();
});
- Se declara
response con await sobre fetch, que realiza la petición HTTP al endpoint.
- La API utilizada es JSONPlaceholder, un servicio gratuito que devuelve datos de prueba [1:30].
- El parámetro
_limit=20 restringe la respuesta a veinte elementos.
- Finalmente se asigna el resultado parseado con
response.json() a la variable photos.
¿Cómo se renderizan los datos en el HTML?
Svelte ofrece bloques de control como {#each} para iterar sobre arreglos directamente en el markup [2:30]:
svelte
<div class="photos">
{#each photos as photo}
<figure>
<img src={photo.thumbnailUrl} alt={photo.title} />
<figcaption>{photo.title}</figcaption>
</figure>
{:else}
<p>Loading...</p>
{/each}
</div>
- Cada foto expone propiedades como
thumbnailUrl y title que provienen de la respuesta de la API [2:48].
- La etiqueta
<figure> agrupa la imagen y su descripción con <figcaption>.
- El bloque
{:else} permite mostrar un estado de carga (loading) mientras el arreglo está vacío [3:05]. Si la petición es rápida, apenas se percibe; si tarda, el usuario ve el mensaje sin problema.
¿Cómo agregar estilos con CSS Grid?
Para organizar las fotos en una cuadrícula se aplican estilos con scoped CSS dentro del mismo componente [4:28]:
css
.photos {
width: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
- display: grid activa el modelo de cuadrícula.
- grid-template-columns: repeat(5, 1fr) distribuye los elementos en cinco columnas de igual tamaño.
- gap: 8px establece la separación entre cada elemento.
¿Cómo se integra el componente en la aplicación?
Una vez creado el componente Photos.svelte, se importa en el archivo principal de la aplicación [3:50]:
javascript
import Photos from './components/Photos.svelte';
Y se utiliza como cualquier etiqueta HTML:
svelte
<Photos />
Al guardar y recargar la página, en la consola aparece el mensaje onMount e inmediatamente se renderizan las fotografías con sus títulos [4:10]. Todo el flujo queda claro:
- El componente se monta.
- Se ejecuta la función dentro de
onMount.
- Se realiza la petición con async/await y fetch.
- Los datos se asignan a la variable reactiva.
- Svelte actualiza el DOM automáticamente.
Si quieres profundizar en la creación de layouts más complejos, pon en práctica CSS Grid y experimenta con diferentes cantidades de columnas y espaciados. ¿Qué otra API te gustaría consumir con este patrón? Comparte tu experiencia en los comentarios.
