D’une vue au HTML progressif

Construisez d’abord une vue serveur, puis ajoutez les fragments progressifs aux parties qui en bénéficient.

Configurer le JSX#

Installez Core et configurez le JSX avec jsxImportSource: "@vincle/core".

Composer une vue#

Les composants sont des fonctions. Composez-les avec des props typées et chargez les données dans les composants async.

// Replace this sample data source with your database or search service.
async function findResults() {
  return [{ title: "Getting started", href: "/guide/getting-started/installation" }];
}

export async function Results() {
  const items = await findResults();
  return (
    <ul>
      {items.map((item) => (
        <li>
          <a href={item.href}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}

Retourner du HTML depuis une route#

Attendez renderToString et retournez une réponse text/html. Votre routeur reste responsable des requêtes et des réponses.

import { renderToString } from "@vincle/core";
import { Results } from "./results";

export async function GET() {
  const html = await renderToString(
    <main>
      <h1>Search results</h1>
      <Results />
    </main>,
  );

  return new Response(html, {
    headers: { "Content-Type": "text/html; charset=utf-8" },
  });
}

Laisser arriver les résultats plus tard#

Installez Flow pour différer les résultats lents. serve() négocie le mode de réponse ; <Defer> conserve un contenu de repli jusqu’à l’arrivée du fragment.

npm install @vincle/flow

pnpm add @vincle/flow

bun add @vincle/flow

import { Defer, renderToStream } from "@vincle/flow";
import { NativeAdapter } from "@vincle/flow/adapters";
import { Results } from "./results";

function Page() {
  return (
    <main>
      <h1>Search results</h1>
      <Defer fallback={<p>Loading results…</p>}>
        <Results />
      </Defer>
    </main>
  );
}

const stream = renderToStream(() => <Page />, NativeAdapter);

return new Response(stream.pipeThrough(new TextEncoderStream()), {
  headers: { "Content-Type": "text/html; charset=utf-8" },
});

Pour aller plus loin#

Consultez les composants, le streaming et le service HTTP.