Menulis halaman

Setiap berkas yang berakhiran ekstensi halaman adalah halaman. Ekstensi bawaan: .ht.js, .html.js, serta varian TypeScript / JSX (.ht.ts, .ht.tsx, …).

Jika keluaran diawali <html>, sitelo menambahkan <!DOCTYPE html> di depannya secara otomatis. Untuk markup, pilih ht.js (javascript-to-html) — fungsi tag yang mengembalikan string, tanpa mesin templat atau runtime React.

1. Fungsi yang mengembalikan HTML

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

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

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

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

Berkas JSX memakai *.ht.jsx / *.ht.tsx dan membutuhkan react + react-dom terpasang. Lihat Batasan JSX di bawah — sitelo mengubah JSX menjadi HTML statis saat build; ini bukan aplikasi React di peramban.

2. String biasa

export default `<html><body><h1>Sestatis mungkin</h1></body></html>`

3. Modul terstruktur

Simpan render, data, dan generateStaticParams bersama-sama:

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

Batasan JSX

sitelo dapat merender halaman .ht.jsx / .ht.tsx dengan react-dom/server sehingga Anda bisa menulis sintaks JSX yang sudah akrab. Itu kemudahan menulis — bukan aplikasi React.

React dibuat untuk peramban: pohon komponen yang dipasang, dihidrasi, dan menanggapi peristiwa. sitelo tidak pernah mengirim runtime itu bersama halaman Anda. Saat build ia merender JSX Anda menjadi string HTML, menulis berkasnya, lalu berhenti. Tidak ada bundel React klien, tidak ada hidrasi, dan tidak ada DOM virtual yang menunggu di peramban.

Karena itu:

Penangan peristiwa (onClick, onChange, …) tidak melakukan apa pun di situs jadi — tidak ada yang mendengarkan. Server pengembangan memperingatkan bila menemukannya.
Hook (useState, useEffect, …) bukan bagian dari halaman yang diterbitkan. Mereka mungkin berjalan sekali saat perenderan build; mereka tidak menyimpan keadaan di peramban.
API khusus peramban (window, document) tidak tersedia ketika halaman dirender saat build.
dangerouslySetInnerHTML berfungsi untuk menyuntikkan string HTML; interaktivitas tetap membutuhkan <script> klien terpisah.

Untuk klik, formulir, dan perilaku klien lain, tautkan skrip biasa lewat jalur aset, atau gunakan island server untuk HTML saat permintaan. Pilih ht.js atau literal templat bila Anda tidak butuh sintaks JSX — tanpa memasang React, dan modelnya cocok dengan “HTML saat build”.

Konteks render

Setiap fungsi halaman menerima satu argumen:

params

Parameter rute untuk halaman ini (Record<string, string | string[]>).

data

Apa pun yang dikembalikan fungsi data() Anda.

page

Metadata rute (routePath, relativePath, …).

dev

true di server pengembangan, false saat build.