Écrire des pages

Tout fichier se terminant par une extension de page est une page. Extensions par défaut : .ht.js, .html.js, et les variantes TypeScript / JSX (.ht.ts, .ht.tsx, …).

Si la sortie commence par <html>, sitelo ajoute <!DOCTYPE html> automatiquement. Pour le balisage, préférez ht.js (javascript-to-html) : des fonctions de balise qui renvoient des chaînes, sans moteur de gabarit ni runtime React.

1. Une fonction qui renvoie du HTML

export default ({ params, data, dev }) => `
  <html>
    <body><h1>Bonjour</h1></body>
  </html>
`

import { html, body, h1 } from 'javascript-to-html'

export default ({ params, data, dev }) =>
  html(
    body(h1('Bonjour'))
  )

export default function Page({ params, data, dev }) {
  return (
    <html>
      <body><h1>Bonjour</h1></body>
    </html>
  )
}

Les fichiers JSX utilisent *.ht.jsx / *.ht.tsx et nécessitent react et react-dom. Voir les limites de JSX plus bas — sitelo transforme le JSX en HTML statique au build ; ce n’est pas une application React dans le navigateur.

2. Une simple chaîne

export default `<html><body><h1>Aussi statique que possible</h1></body></html>`

3. Un module structuré

Gardez render, data et generateStaticParams ensemble :

export default {
  generateStaticParams: () => [{ slug: 'hello' }],
  data: ({ params }) => ({ title: params.slug }),
  render: ({ data }) => `<html><body><h1>${data.title}</h1></body></html>`,
}

import { html, body, h1 } from 'javascript-to-html'

export default {
  generateStaticParams: () => [{ slug: 'hello' }],
  data: ({ params }) => ({ title: params.slug }),
  render: ({ data }) =>
    html(
      body(h1(data.title))
    ),
}

export default {
  generateStaticParams: () => [{ slug: 'hello' }],
  data: ({ params }) => ({ title: params.slug }),
  render: ({ data }) => (
    <html>
      <body><h1>{data.title}</h1></body>
    </html>
  ),
}

Limites de JSX

sitelo peut rendre des pages .ht.jsx / .ht.tsx avec react-dom/server, ce qui vous permet d’écrire la syntaxe JSX habituelle. C’est un confort d’écriture — pas une application React.

React est conçu pour le navigateur : un arbre de composants qui se monte, s’hydrate et réagit aux événements. sitelo n’embarque jamais ce runtime avec vos pages. Au build, il rend votre JSX en une chaîne HTML, écrit le fichier, et s’arrête là. Pas de bundle React côté client, pas d’hydratation, pas de DOM virtuel qui attend dans le navigateur.

Par conséquent :

Les gestionnaires d’événements (onClick, onChange, …) ne font rien sur le site final — personne n’écoute. Le serveur de développement vous avertit s’il en trouve.
Les hooks (useState, useEffect, …) ne font pas partie de la page livrée. Ils peuvent s’exécuter une fois pendant le rendu du build ; ils ne conservent aucun état dans le navigateur.
Les API propres au navigateur (window, document) ne sont pas disponibles pendant le rendu au build.
dangerouslySetInnerHTML fonctionne pour injecter des chaînes HTML ; l’interactivité nécessite toujours un <script> client séparé.

Pour les clics, les formulaires et le reste du comportement client, liez un script normal via le pipeline de ressources, ou utilisez les îlots serveur pour du HTML généré à la requête. Quand vous n’avez pas besoin de la syntaxe JSX, préférez ht.js ou les gabarits de chaîne — aucune installation de React, et un modèle qui colle au « HTML au build ».

Contexte de rendu

Chaque fonction de page reçoit un seul argument :

params

Les paramètres de route de cette page (Record<string, string | string[]>).

data

Ce qu’a renvoyé votre fonction data().

page

Métadonnées de la route (routePath, relativePath, …).

dev

true dans le serveur de développement, false au build.