Composable-ul useFetch() în Nuxt 3 în Vue.js & Nuxt

Ce este useFetch() în Nuxt 3

În aplicațiile Nuxt 3 cu randare pe server (SSR), efectuarea unui apel HTTP direct cu fetch nativ ar genera o descărcare redundantă a acelorași date: o dată pe server în timpul randării HTML-ului și din nou în browser în timpul etapei de hidratare. Composable-ul useFetch() rezolvă această problemă:

Rulează apelul pe server, serializează rezultatul în payload-ul paginii și îl preia instant pe client fără un al doilea apel HTTP.

<script setup>
const { data: articole, pending, error } = await useFetch('/api/articole', {
    lazy: false,
    query: { limit: 10 }
});
</script>

<template>
  <div v-if="pending">Se încarcă articolele...</div>
  <ul v-else>
    <li v-for="art in articole" :key="art.id">{{ art.titlu }}</li>
  </ul>
</template>