Memuat data

Ekspor fungsi data() dan hasilnya muncul sebagai ctx.data di fungsi render Anda. Ia berjalan saat build, dan per permintaan di server pengembangan.

export async function data({ params, dev }) {
  const res = await fetch(`https://api.example.com/posts/${params.slug}`)
  return await res.json()
}

export default ({ data }) => `
  <html><body>
    <h1>${data.title}</h1>
    ${data.body}
  </body></html>
`

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

export async function data({ params, dev }) {
  const res = await fetch(`https://api.example.com/posts/${params.slug}`)
  return await res.json()
}

export default ({ data }) =>
  html(
    body(
      h1(data.title),
      data.body,
    ),
  )

export async function data({ params, dev }) {
  const res = await fetch(`https://api.example.com/posts/${params.slug}`)
  return await res.json()
}

export default function Post({ data }) {
  return (
    <html>
      <body>
        <h1>{data.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: data.body }} />
      </body>
    </html>
  )
}

fetchWithCache

Membangun banyak halaman dari API yang sama? Impor fetchWithCache dari sitelo:

import { fetchWithCache } from 'sitelo'

export async function data({ params }) {
  const res = await fetchWithCache(
    `https://api.example.com/posts/${params.slug}`,
    { /* opsi fetch standar */ },
    { maxAge: 3600 }
  )
  return { post: await res.json() }
}

Opsi

• maxAge — masa berlaku singgahan dalam detik (bawaan 3600)
• cacheKey — kunci khusus (bawaan: hash dari URL + metode + header + body)
• forceRefresh — lewati singgahan
• cache — 'auto' | 'memory' | 'fs' | 'none'

Mode singgahan

• auto (bawaan) — memori saat pengembangan, sistem berkas pada build produksi
• memory — dalam proses, dibersihkan saat proses berakhir
• fs — disimpan di bawah node_modules/.cache/
• none — selalu mengambil ulang

Secara bawaan hanya permintaan GET yang disinggahkan (berikan cacheKey untuk menyinggahkan metode lain). Respons galat tidak pernah disinggahkan.

Berkas JSON lokal

Tidak punya API? Simpan kontennya di repositori sebagai JSON dan baca dengan sitelo/data.

data/
├─ site.json
└─ posts/
   ├─ hello-world.json
   └─ why-static.json

import { readJsonCollection } from 'sitelo/data'

const posts = () => readJsonCollection('data/posts', { sort: '-date' })

export async function generateStaticParams() {
  return (await posts()).map((post) => ({ slug: post.slug }))
}

export async function data({ params }) {
  return (await posts()).find((post) => post.slug === params.slug)
}

export default ({ data }) => `
  <html><body>
    <h1>${data.title}</h1>
    <time datetime="${data.date}">${data.date}</time>
    ${data.body}
  </body></html>
`

Jalur relatif diselesaikan dari akar proyek, jadi data/posts berarti hal yang sama dari mana pun Anda menjalankan CLI. readJson mengembalikan satu berkas terurai; readJsonCollection mengembalikan larik entri, masing-masing dengan slug — dari direktori berisi berkas .json (satu per entri, slug dari nama berkas), atau dari satu berkas berisi larik entri maupun objek berkunci slug.

// data/posts/hello-world.json  ->  { slug: 'hello-world', ... }
await readJsonCollection('data/posts')

// data/posts.json: [{ "slug": "hello-world", ... }]
// data/posts.json: { "hello-world": { ... } }
await readJsonCollection('data/posts.json')

// data/site.json
await readJson('data/site.json')

Opsi koleksi

• slug — nama bidang atau fungsi; bawaannya nama berkas, kunci objek, atau slug / id milik entri itu sendiri
• sort — nama bidang ('date' menaik, '-date' menurun) atau fungsi pembanding
• recursive — sertakan berkas .json di subdirektori, dengan slug dari jalurnya
• root — direktori tempat jalur relatif diselesaikan
• cache — 'auto' | 'memory' | 'none'

Pembacaan diingat per berkas, jadi build 500 halaman mengurai tiap berkas sekali saja. Server pengembangan justru memvalidasi ulang terhadap waktu ubah, dan memuat ulang peramban ketika berkas JSON yang dibaca sebuah halaman berubah. Slug ganda, berkas hilang, dan JSON rusak menggagalkan build, masing-masing disebut dengan jalurnya.