Seiten schreiben

Jede Datei mit einer Seitenendung ist eine Seite. Standardendungen: .ht.js, .html.js sowie die TypeScript- und JSX-Varianten (.ht.ts, .ht.tsx, …).

Beginnt die Ausgabe mit <html>, stellt sitelo automatisch <!DOCTYPE html> voran. Fürs Markup empfehlen wir ht.js (javascript-to-html): Tag-Funktionen, die Strings zurückgeben — ohne Template-Engine und ohne React-Runtime.

1. Eine Funktion, die HTML zurückgibt

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

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

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

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

JSX-Dateien nutzen *.ht.jsx / *.ht.tsx und benötigen installiertes react und react-dom. Siehe die JSX-Einschränkungen weiter unten — sitelo verwandelt JSX zur Build-Zeit in statisches HTML; es ist keine React-Anwendung im Browser.

2. Ein einfacher String

export default `<html><body><h1>Statischer geht es nicht</h1></body></html>`

3. Ein strukturiertes Modul

Halte render, data und generateStaticParams zusammen:

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>
  ),
}

JSX-Einschränkungen

sitelo kann .ht.jsx- / .ht.tsx-Seiten mit react-dom/server rendern, damit du die vertraute JSX-Syntax schreiben kannst. Das ist eine Schreiberleichterung — keine React-Anwendung.

React ist für den Browser gebaut: ein Komponentenbaum, der mountet, hydriert und auf Ereignisse reagiert. sitelo liefert diese Runtime nie mit deinen Seiten aus. Zur Build-Zeit rendert es dein JSX zu einem HTML-String, schreibt die Datei und hört dort auf. Kein React-Bundle im Client, keine Hydration, kein virtuelles DOM, das im Browser wartet.

Daraus folgt:

Event-Handler (onClick, onChange, …) bewirken auf der fertigen Website nichts — es hört niemand zu. Der Entwicklungsserver warnt, wenn er welche findet.
Hooks (useState, useEffect, …) sind nicht Teil der ausgelieferten Seite. Sie laufen unter Umständen einmal beim Build-Rendering; einen Zustand im Browser halten sie nicht.
Nur im Browser verfügbare APIs (window, document) stehen beim Rendern zur Build-Zeit nicht zur Verfügung.
dangerouslySetInnerHTML funktioniert zum Einfügen von HTML-Strings; Interaktivität braucht weiterhin ein eigenes Client-<script>.

Für Klicks, Formulare und sonstiges Client-Verhalten bindest du ein normales Skript über die Asset-Pipeline ein oder nutzt Server-Islands für HTML zur Anfragezeit. Wenn du die JSX-Syntax nicht brauchst, nimm lieber ht.js oder Template-Literale — keine React-Installation, und das Modell passt zu „HTML zur Build-Zeit“.

Render-Kontext

Jede Seitenfunktion bekommt genau ein Argument:

params

Die Routenparameter dieser Seite (Record<string, string | string[]>).

data

Was deine data()-Funktion zurückgegeben hat.

page

Metadaten zur Route (routePath, relativePath, …).

dev

true im Entwicklungsserver, false zur Build-Zeit.