Veri yükleme

Bir data() fonksiyonu dışa aktarın; sonucu işleme fonksiyonunuzda ctx.data olarak görünür. Derleme sırasında, geliştirme sunucusunda ise her istekte çalışır.

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

Aynı API’ye karşı çok sayıda sayfa mı üretiyorsunuz? sitelo’dan fetchWithCache içe aktarın:

import { fetchWithCache } from 'sitelo'

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

Seçenekler

• maxAge — saniye cinsinden önbellek ömrü (varsayılan 3600)
• cacheKey — özel anahtar (varsayılan: URL + yöntem + başlıklar + gövdenin özeti)
• forceRefresh — önbelleği atla
• cache — 'auto' | 'memory' | 'fs' | 'none'

Önbellek kipleri

• auto (varsayılan) — geliştirmede bellek, üretim derlemelerinde dosya sistemi
• memory — süreç içi, süreç sona erdiğinde temizlenir
• fs — node_modules/.cache/ altında kalıcı
• none — her zaman getir

Varsayılan olarak yalnızca GET istekleri önbelleğe alınır (başka yöntemleri önbelleğe almak için bir cacheKey geçirin). Hata yanıtları hiçbir zaman önbelleğe alınmaz.

Yerel JSON dosyaları

API yok mu? İçeriği depoda JSON olarak tutun ve sitelo/data ile okuyun.

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>
`

Göreli yollar proje kökünden çözülür, bu yüzden data/posts CLI’ı nereden çalıştırırsanız çalıştırın aynı anlama gelir. readJson ayrıştırılmış tek bir dosya döndürür; readJsonCollection her biri bir slug taşıyan girdilerden oluşan bir dizi döndürür — bir .json dosyaları dizininden (girdi başına bir dosya, slug dosya adından) ya da girdi dizisi tutan tek bir dosyadan veya slug ile anahtarlanmış bir nesneden.

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

Koleksiyon seçenekleri

• slug — alan adı ya da fonksiyon; varsayılan olarak dosya adı, nesne anahtarı ya da girdinin kendi slug / id değeri
• sort — alan adı ('date' artan, '-date' azalan) ya da bir karşılaştırma fonksiyonu
• recursive — alt dizinlerdeki .json dosyalarını da kapsar, yollarına göre sluglanır
• root — göreli yolların çözüldüğü dizin
• cache — 'auto' | 'memory' | 'none'

Okumalar dosya başına belleğe alınır, bu yüzden 500 sayfalık bir derleme her dosyayı bir kez ayrıştırır. Geliştirme sunucusu bunun yerine değişiklik zamanına karşı doğrular ve bir sayfanın okuduğu JSON dosyası değiştiğinde tarayıcıyı yeniden yükler. Yinelenen sluglar, eksik dosyalar ve bozuk JSON derlemeyi başarısız kılar; her biri yoluyla adlandırılır.