Wczytywanie danych

Wyeksportuj funkcję data(), a jej wynik pojawi się jako ctx.data w Twojej funkcji renderującej. Działa w czasie buildu, a w serwerze deweloperskim przy każdym żądaniu.

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

Budujesz wiele stron na tym samym API? Zaimportuj fetchWithCache z sitelo:

import { fetchWithCache } from 'sitelo'

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

Opcje

• maxAge — czas życia cache w sekundach (domyślnie 3600)
• cacheKey — własny klucz (domyślnie: skrót URL-a + metody + nagłówków + treści)
• forceRefresh — pomiń cache
• cache — 'auto' | 'memory' | 'fs' | 'none'

Tryby cache

• auto (domyślny) — pamięć w dev, system plików w buildach produkcyjnych
• memory — w obrębie procesu, czyszczony przy jego zakończeniu
• fs — trwały, pod node_modules/.cache/
• none — zawsze pobieraj

Domyślnie buforowane są tylko żądania GET (podaj cacheKey, by buforować inne metody). Odpowiedzi błędów nie są buforowane nigdy.

Lokalne pliki JSON

Nie masz API? Trzymaj treść w repozytorium jako JSON i czytaj ją przez 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>
`

Ścieżki względne rozwiązują się od katalogu głównego projektu, więc data/posts znaczy to samo, skądkolwiek uruchamiasz CLI. readJson zwraca jeden sparsowany plik; readJsonCollection zwraca tablicę wpisów, każdy ze slug — z katalogu plików .json (jeden na wpis, slug z nazwy pliku) albo z jednego pliku zawierającego tablicę wpisów bądź obiekt kluczowany slugiem.

// 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')

Opcje kolekcji

• slug — nazwa pola albo funkcja; domyślnie nazwa pliku, klucz obiektu albo własny slug / id wpisu
• sort — nazwa pola ('date' rosnąco, '-date' malejąco) albo funkcja porównująca
• recursive — uwzględnij pliki .json w podkatalogach, ze slugiem z ich ścieżki
• root — katalog, od którego rozwiązują się ścieżki względne
• cache — 'auto' | 'memory' | 'none'

Odczyty są memoizowane per plik, więc build 500 stron parsuje każdy plik raz. Serwer deweloperski zamiast tego sprawdza czas modyfikacji i przeładowuje przeglądarkę, gdy zmieni się plik JSON, który strona czytała. Zduplikowane slugi, brakujące pliki i wadliwy JSON przerywają build, każdy ze wskazaniem ścieżki.