FastLoad

FastLoad adalah sistem progressive rendering opsional dari ZhinNX. Sistem ini merender konten penting lebih dulu, menunda bagian berat, mengoptimalkan media, dan menjaga halaman tetap bisa dipakai saat bagian lain disiapkan.

FastLoad cocok untuk landing page panjang, dashboard, katalog produk, halaman utama aplikasi musik, dan halaman dengan gambar atau data berat.

Penggunaan dasar

import { chunk, fastPage } from './zhinnx/core.js'

fastPage('/', {
  strategy: 'adaptive',
  background: false,
  media: 'auto',
  buffer: 360,
  shell: () => `
    <main>
      <section id="hero"></section>
      <section id="products"></section>
      <section id="deals"></section>
    </main>
  `,
  chunks: [
    chunk('#hero', Hero, { critical: true, media: 'eager' }),
    chunk('#products', {
      skeleton: ProductSkeleton,
      data: () => api.get('/products.json'),
      render: products => ProductGrid(products),
      media: 'lazy'
    })
  ]
})

Hindari full render untuk update kecil

set() atau update() normal akan memicu render route secara default. Di halaman FastLoad, itu bisa membangun ulang shell dan chunk. Untuk perubahan kecil seperti jumlah cart, liked status, badge, atau toggle, gunakan render: false dan patch hanya bagian DOM yang berubah.

update('shop.cart', cart => {
  const next = Array.isArray(cart) ? [...cart] : []
  next.push({ id: 'bag-01', qty: 1 })
  save('cart', next)
  return next
}, { render: false })

patch('.cart-count', get('shop.cart', []).length)

patch()

patch(selector, html) mengganti inner HTML elemen yang cocok dan mengikat ulang action ZhinNX di dalam elemen tersebut.

patch('.cart-pill', CartPill())

Nilai html juga bisa berupa function.

patch('.cart-pill', ({ state }) => CartPill(state.shop.cart))

refresh()

refresh(selector, html) bekerja seperti patch() jika HTML diberikan. Tanpa HTML, fungsi ini hanya mengikat ulang action di area yang dipilih.

refresh('.product-grid')

Warning debug

Saat debug mode aktif, ZhinNX memberi peringatan jika update state memicu full render ketika FastLoad aktif. Biasanya update seperti itu sebaiknya memakai { render: false } dengan patch() atau refresh().

zz dev --debug

Cek FastLoad aktif

if (isFastPageActive()) {
  patch('.cart-count', cart.length)
}

Kapan tidak perlu dipakai

Jangan pakai FastLoad untuk halaman sangat kecil, login sederhana, atau halaman yang memang harus tampil utuh sejak awal. FastLoad mempercepat rasa loading; ia tidak otomatis mengecilkan semua file kecuali digabung dengan lazy data, lazy media, dan dynamic import.