SSR

Come funziona

Il motore automatico misura e riscrive il DOM, che esiste solo sul client. Quindi il disegno degli skeleton avviene sul client, dopo l'idratazione. Il render iniziale del server e quello del client sono identici, il che significa nessun mismatch di idratazione.

In pratica:

1. Il server renderizza il tuo markup reale (o il ramo di caricamento).
2. Il client idrata esattamente quel markup.
3. Dopo il mount, se lo scope è attivo, il motore dipinge le ossa.
4. Al termine del caricamento, gli originali vengono ripristinati sul posto.

Evitare un flash

Collega :enabled al tuo stato di caricamento, così lo skeleton si attiva solo mentre i dati sono in corso:

<script setup lang="ts">
// I composable lazy ritornano subito con `pending: true`, così lo skeleton
// compare subito dopo l'idratazione e sparisce all'arrivo dei dati.
const { data, pending } = await useLazyFetch('/api/dashboard')
</script>

<template>
  <Skeletonizer :enabled="pending">
    <Dashboard :data="data" />
  </Skeletonizer>
</template>

Primitive manuali durante l'SSR

Le primitive Skeleton* sono semplice markup, quindi vengono renderizzate dal server. Usale quando vuoi lo skeleton visibile nell'HTML iniziale (ad es. placeholder above-the-fold):

<template>
  <div v-if="pending">
    <SkeletonCard media avatar :lines="3" />
  </div>
  <ArticleCard v-else :article="data" />
</template>

Nitro & accessibilità

Il modulo è compatibile con Nitro e il plugin di runtime è SSR-safe (non tocca il DOM sul server). Le ossa dipinte sono aria-hidden e gli host attivi ricevono aria-busy.