Pisanie stron

Każdy plik kończący się rozszerzeniem strony jest stroną. Domyślne rozszerzenia: .ht.js, .html.js oraz warianty TypeScript / JSX (.ht.ts, .ht.tsx, …).

Jeśli wynik zaczyna się od <html>, sitelo samo dokleja z przodu <!DOCTYPE html>. Do znaczników wybieraj ht.js (javascript-to-html): funkcje-znaczniki zwracające ciągi, bez silnika szablonów i bez runtime’u Reacta.

1. Funkcja zwracająca HTML

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

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

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

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

Pliki JSX używają *.ht.jsx / *.ht.tsx i wymagają zainstalowanych react i react-dom. Zobacz ograniczenia JSX poniżej — sitelo zamienia JSX na statyczny HTML podczas buildu; to nie jest aplikacja React w przeglądarce.

2. Zwykły ciąg znaków

export default `<html><body><h1>Statyczniej się nie da</h1></body></html>`

3. Moduł strukturalny

Trzymaj render, data i generateStaticParams razem:

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

Ograniczenia JSX

sitelo potrafi renderować strony .ht.jsx / .ht.tsx przez react-dom/server, żebyś mógł pisać znajomą składnią JSX. To udogodnienie przy pisaniu — nie aplikacja React.

React jest zbudowany dla przeglądarki: drzewo komponentów, które się montuje, hydratuje i reaguje na zdarzenia. sitelo nigdy nie wysyła tego runtime’u razem z Twoimi stronami. Podczas buildu renderuje Twój JSX do ciągu HTML, zapisuje plik i kończy. Nie ma żadnej paczki Reacta po stronie klienta, żadnej hydratacji i żadnego wirtualnego DOM-u czekającego w przeglądarce.

Dlatego:

• Obsługa zdarzeń (onClick, onChange, …) nie robi nic w gotowej witrynie — nikt nie słucha. Serwer deweloperski ostrzega, gdy ją znajdzie.
• Hooki (useState, useEffect, …) nie są częścią opublikowanej strony. Mogą wykonać się raz podczas renderu buildu; nie utrzymują stanu w przeglądarce.
• API dostępne tylko w przeglądarce (window, document) nie istnieją, gdy strona renderuje się podczas buildu.
• dangerouslySetInnerHTML działa do wstrzykiwania ciągów HTML; interaktywność nadal wymaga osobnego klienckiego <script>.

Dla kliknięć, formularzy i innych zachowań po stronie klienta podlinkuj zwykły skrypt przez potok zasobów albo użyj wysp serwerowych dla HTML-a tworzonego w chwili żądania. Gdy nie potrzebujesz składni JSX, wybieraj ht.js albo literały szablonowe — bez instalowania Reacta, a model pokrywa się z „HTML podczas buildu”.

Kontekst renderowania

Każda funkcja strony dostaje jeden argument:

params

Parametry trasy dla tej strony (Record<string, string | string[]>).

data

Cokolwiek zwróciła Twoja funkcja data().

page

Metadane trasy (routePath, relativePath, …).

dev

true w serwerze deweloperskim, false podczas buildu.