---
title: "Composants"
headingIds:
  ["components", "defer", "merge-types", "slot-named-insertion-point", "content-types", "props"]
---

# Composants

`<Defer>` produit du contenu différé ; `<Slot>` réserve un emplacement pour un fragment nommé.

## `<Defer>`

Placez les parties lentes dans `<Defer>`. `fallback` reste visible en attendant ; `target` permet de choisir un emplacement nommé. Le contenu peut recevoir un signal pour annuler les requêtes.

```tsx
import { Defer } from "@vincle/flow";

<Defer fallback={<p>Loading dashboard…</p>}>
  <HeavyDashboard />
</Defer>;
```

```tsx
<Defer fallback={<p>Loading dashboard…</p>}>{(signal) => <HeavyDashboard signal={signal} />}</Defer>
```

### Modes de fusion

`merge` indique comment le fragment est inséré : remplacement, ajout ou insertion relative, selon les capacités de l’adaptateur.

| `merge`     | Effet                                         |
| ----------- | --------------------------------------------- |
| `"replace"` | Remplace l’élément ciblé (par défaut)         |
| `"append"`  | Insère le contenu comme dernier enfant        |
| `"prepend"` | Insère le contenu comme premier enfant        |
| `"before"`  | Insère le contenu comme voisin précédent      |
| `"after"`   | Insère le contenu comme voisin suivant        |
| `"morph"`   | Met à jour la cible sur place par comparaison |

## `<Slot>` : point d’insertion nommé

Un `<Slot name="…">` est un emplacement passif. Un `<Defer target="…">` correspondant fournit le résultat. Il ne crée pas un second contenu de repli au même emplacement.

```tsx
import { Defer, Slot } from "@vincle/flow";
import { Results } from "./results";

function SearchPage() {
  return (
    <>
      <main>
        <h1>Search results</h1>
        <Slot name="results">
          <p>Loading results…</p>
        </Slot>
      </main>
      <Defer target="results">
        <Results />
      </Defer>
    </>
  );
}
```

## Types de contenu

Le contenu peut être une valeur rendable, une promesse, une factory asynchrone ou un itérable asynchrone. Chaque valeur d’une séquence peut devenir une mise à jour.

| Contenu                      | Comportement                               |
| ---------------------------- | ------------------------------------------ |
| `JSX.Element` ou `string`    | Une mise à jour, un seul rendu             |
| `AsyncIterable<JSX.Element>` | Un flux : une mise à jour par valeur reçue |

## Props

Configurez `target`, `fallback`, `merge` et le délai selon la région. Conservez des identifiants valides et uniques.

| Prop       | Composant | Rôle                                                                 |
| ---------- | --------- | -------------------------------------------------------------------- |
| `name`     | `Slot`    | Identifiant de l’emplacement (obligatoire)                           |
| `target`   | `Defer`   | Identifiant facultatif ; généré automatiquement si absent            |
| `fallback` | `Defer`   | Contenu de repli affiché dans la structure initiale                  |
| `merge`    | `Defer`   | Mode d’application à la cible (par défaut `"replace"`)               |
| `timeout`  | `Defer`   | Délai de rendu du fragment en ms                                     |
| `onError`  | `Defer`   | Gestionnaire d’erreur du fragment, prioritaire sur celui du renderer |