Scrivere pagine

Qualunque file che termina con un’estensione di pagina è una pagina. Estensioni predefinite: .ht.js, .html.js, e le varianti TypeScript / JSX (.ht.ts, .ht.tsx, …).

Se l’output inizia con <html>, sitelo antepone <!DOCTYPE html> automaticamente. Per il markup preferisci ht.js (javascript-to-html): funzioni-tag che restituiscono stringhe, senza motori di template né runtime React.

1. Una funzione che restituisce HTML

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

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

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

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

I file JSX usano *.ht.jsx / *.ht.tsx e richiedono react + react-dom installati. Vedi le limitazioni di JSX più sotto — sitelo trasforma JSX in HTML statico in fase di build; non è un’app React nel browser.

2. Una semplice stringa

export default `<html><body><h1>Più statico di così</h1></body></html>`

3. Un modulo strutturato

Tieni insieme render, data e generateStaticParams:

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

Limitazioni di JSX

sitelo può renderizzare pagine .ht.jsx / .ht.tsx con react-dom/server, così puoi scrivere con la sintassi JSX che conosci. È una comodità di scrittura — non un’applicazione React.

React è pensato per il browser: un albero di componenti che si monta, si idrata e risponde agli eventi. sitelo non spedisce mai quel runtime insieme alle tue pagine. In fase di build renderizza il tuo JSX in una stringa HTML, scrive il file e si ferma. Non c’è alcun bundle React lato client, nessuna idratazione e nessun virtual DOM in attesa nel browser.

Per questo:

• I gestori di eventi (onClick, onChange, …) non fanno nulla nel sito finito — non c’è niente in ascolto. Il server di sviluppo avvisa se li trova.
• Gli hook (useState, useEffect, …) non fanno parte della pagina pubblicata. Possono girare una volta durante il render di build; non mantengono stato nel browser.
• Le API disponibili solo nel browser (window, document) non esistono mentre la pagina viene renderizzata in fase di build.
• dangerouslySetInnerHTML funziona per iniettare stringhe HTML; l’interattività richiede comunque uno <script> client separato.

Per clic, form e altri comportamenti lato client, collega un normale script tramite la pipeline delle risorse, oppure usa le island server per HTML generato al momento della richiesta. Quando non ti serve la sintassi JSX, preferisci ht.js o i template literal — nessuna installazione di React, e il modello combacia con “HTML in fase di build”.

Contesto di render

Ogni funzione di pagina riceve un solo argomento:

params

I parametri di rotta di questa pagina (Record<string, string | string[]>).

data

Qualunque cosa abbia restituito la tua funzione data().

page

Metadati della rotta (routePath, relativePath, …).

dev

true nel server di sviluppo, false in fase di build.