Escribir páginas

Cualquier archivo que termine en una extensión de página es una página. Extensiones por defecto: .ht.js, .html.js, y las variantes de TypeScript y JSX (.ht.ts, .ht.tsx, …).

Si la salida empieza por <html>, sitelo añade <!DOCTYPE html> automáticamente. Para el marcado recomendamos ht.js (javascript-to-html): funciones de etiqueta que devuelven cadenas, sin motor de plantillas ni runtime de React.

1. Una función que devuelve HTML

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

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

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

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

Los archivos JSX usan *.ht.jsx / *.ht.tsx y necesitan react y react-dom instalados. Consulta las limitaciones de JSX más abajo: sitelo convierte JSX en HTML estático en tiempo de compilación; no es una aplicación de React en el navegador.

2. Una simple cadena

export default `<html><body><h1>Más estático imposible</h1></body></html>`

3. Un módulo estructurado

Mantén render, data y generateStaticParams juntos:

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

Limitaciones de JSX

sitelo puede renderizar páginas .ht.jsx / .ht.tsx con react-dom/server, así que puedes escribir con la sintaxis JSX de siempre. Eso es una comodidad para escribir, no una aplicación de React.

React está pensado para el navegador: un árbol de componentes que se monta, se hidrata y responde a eventos. sitelo nunca envía ese runtime con tus páginas. En tiempo de compilación renderiza tu JSX a una cadena HTML, escribe el archivo y ahí termina. No hay bundle de React en el cliente, ni hidratación, ni DOM virtual esperando en el navegador.

Por eso:

Los manejadores de eventos (onClick, onChange, …) no hacen nada en el sitio final — no hay nadie escuchando. El servidor de desarrollo avisa si los encuentra.
Los hooks (useState, useEffect, …) no forman parte de la página publicada. Puede que se ejecuten una vez durante el renderizado de la compilación; no mantienen estado en el navegador.
Las APIs exclusivas del navegador (window, document) no están disponibles mientras la página se renderiza en tiempo de compilación.
dangerouslySetInnerHTML sirve para inyectar cadenas de HTML; la interactividad sigue necesitando un <script> de cliente aparte.

Para clics, formularios y demás comportamiento de cliente, enlaza un script normal a través del pipeline de recursos, o usa islas de servidor para HTML generado en el momento de la petición. Cuando no necesites la sintaxis JSX, mejor ht.js o plantillas de cadena: sin instalar React, y con un modelo que encaja con «HTML en tiempo de compilación».

Contexto de renderizado

Cada función de página recibe un único argumento:

params

Los parámetros de ruta de esta página (Record<string, string | string[]>).

data

Lo que haya devuelto tu función data().

page

Metadatos de la ruta (routePath, relativePath, …).

dev

true en el servidor de desarrollo, false en tiempo de compilación.