---
title: "serve"
headingIds:
  [
    "serve",
    "signature",
    "parameters",
    "usage",
    "with-htmx-negotiation",
    "with-custom-negotiation",
    "with-custom-error-handler",
    "with-headers",
    "options",
  ]
---

# serve

Construit une `Response` HTTP à partir d’une page Flow et des options de négociation.

## Signature

`serve(request, page, adapter, options?)` prend la requête, une fonction produisant la page et un adaptateur, puis retourne la réponse encodée.

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

function serve(
  req: Request,
  page: (n: Negotiation) => JSX.Element,
  adapter: StreamingAdapter,
  opts?: FlowOptions & ResponseInit & { negotiate?: Negotiate; mode?: "full" | "fragment" },
): Promise<Response>;
```

## Paramètres

La requête transmet son signal d’annulation. Les options configurent le mode, les en-têtes, la négociation, les erreurs et les délais.

| Paramètre | Type                                                                                  | Description                                |
| --------- | ------------------------------------------------------------------------------------- | ------------------------------------------ |
| `req`     | `Request`                                                                             | Requête HTTP entrante                      |
| `page`    | `(n: Negotiation) => JSX.Element`                                                     | Fonction produisant la page                |
| `adapter` | `StreamingAdapter`                                                                    | Adaptateur de représentation des fragments |
| `opts`    | `FlowOptions & ResponseInit & { negotiate?: Negotiate; mode?: "full" \| "fragment" }` | Options Flow, en-têtes et mode             |

## Utilisation

Utilisez la fonction dans votre routeur ou votre serveur compatible avec les API Web.

```tsx
import { serve } from "@vincle/flow/http";
import { NativeAdapter } from "@vincle/flow/adapters";

Bun.serve({
  port: 3000,
  fetch(req) {
    return serve(req, () => <HomePage />, NativeAdapter);
  },
});
```

### Avec la négociation HTMX

`negotiateHtmx` sélectionne le fragment indiqué par HTMX. La réponse conserve les informations `Vary` nécessaires pour distinguer les modes de rendu dans les caches.

```tsx
import { serve, negotiateHtmx } from "@vincle/flow/http";
import { HtmxAdapter } from "@vincle/flow/adapters";

Bun.serve({
  port: 3000,
  fetch(req) {
    return serve(req, () => <Page />, HtmxAdapter, {
      negotiate: negotiateHtmx,
    });
  },
});
```

### Avec une négociation personnalisée

Une fonction de négociation personnalisée peut déterminer le fragment et les en-têtes de variation d’après la requête.

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

const negotiateMyLib: Negotiate = (req) => {
  const fragment = req.headers.get("X-Fragment-Id") ?? undefined;
  return {
    headers: { Vary: "X-Fragment-Id" },
    target: fragment,
  };
};
```

### Avec un gestionnaire d’erreur personnalisé

`onError` reçoit une erreur de contenu différé et peut retourner un remplacement adapté au fragment.

```tsx
serve(req, () => <Page />, NativeAdapter, {
  onError: (error, { id, kind }) => {
    console.error(`Fragment ${id} failed:`, error);
    return <p>Unavailable</p>;
  },
});
```

### Avec des en-têtes

Ajoutez vos en-têtes via les options. Le type de contenu HTML et les en-têtes nécessaires à la négociation sont composés dans la réponse.

```tsx
serve(req, () => <Page />, NativeAdapter, {
  headers: { "X-Custom": "value" },
  status: 200,
});
```

### Options

Les options comprennent `adapter`, `negotiate`, `signal`, `onError`, `defaultTimeout` et `headers`.

| Option           | Type                                   | Valeur par défaut | Description                               |
| ---------------- | -------------------------------------- | ----------------- | ----------------------------------------- |
| `signal`         | `AbortSignal`                          | Aucune            | Annuler les rendus en cours               |
| `onError`        | `(error, info) => JSX.Element \| void` | Aucune            | Gestionnaire d’erreur par fragment        |
| `defaultTimeout` | `number`                               | Aucune            | Délai par fragment (ms)                   |
| `negotiate`      | `(req: Request) => Negotiation`        | Aucune            | Déterminer le mode selon la requête       |
| `mode`           | `"full" \| "fragment"`                 | `"full"`          | Rendre le document complet ou un fragment |
| `headers`        | `HeadersInit`                          | Aucune            | En-têtes supplémentaires de la réponse    |
| `status`         | `number`                               | `200`             | Code de statut de la réponse              |
| `statusText`     | `string`                               | Aucune            | Texte du statut de la réponse             |