Le tableau des produits

Chargez les données dans un loader et affichez-les sous forme de tableau — entièrement côté serveur, sans fetch côté client.

Passons aux données. Un loader s'exécute côté serveur avant le rendu de la page ; ce qu'il retourne arrive comme prop data de la page. Comme il s'exécute côté serveur, vous pouvez lire une base de données, appeler une API, ou — ici — simplement trier un tableau.

src/app/products/page.tsx

export async function loader() {
  const products = [...CATALOGUE].sort((a, b) => a.name.localeCompare(b.name));
  return { products };
}

export default function Products({ data }) {
  return (
    <table>
      {data.products.map((p) => (
        <tr key={p.id}><td>{p.name}</td><td>${p.price}</td></tr>
      ))}
    </table>
  );
}

Il n'y a pas de fetch côté client et aucun spinner de chargement — le HTML arrive complet, avec les lignes déjà présentes. Le tableau complet (avec SKU et un badge de stock) est rendu en direct dans l'aperçu.

NOTE

Pour communiquer avec une vraie base de données, bext intègre SQLite — interrogez-la depuis le loader via le bridge. Besoin de lire des paramètres de requête pour filtrer ou paginer ? Le loader reçoit l'objet request ; voir données & loaders.