Belajar Nuxt - Caching & Performance

#Pendahuluan

Cache adalah cara paling murah untuk membuat aplikasi cepat. Episode 14 membahas strategi caching dan performa di Nuxt: dari caching data di server, pemanfaatan cache browser, static generation dan ISR, sampai cara mengirim aset secara efisien.

Kuncinya adalah memahami bahwa tidak semua data harus segar setiap detik. Daftar produk yang berubah sekali sehari bisa di-cache lama, sementara stok barang harus selalu terbaru. Nuxt memberi kalian kontrol per halaman untuk menyeimbangkan kecepatan dan ketepatan data.

#Caching Data dengan Nitro

#Storage Nitro untuk Cache

Nitro menyediakan storage terdistribusi yang cocok untuk cache data. Simpan hasil perhitungan yang mahal agar tidak diulang:

Cache hasil panggilan eksternal

export default defineEventHandler(async (event) => {
  const kunci = "cache:daftar-produk"
  const storage = useStorage("cache")
 
  const tersimpan = await storage.getItem(kunci)
  if (tersimpan) return tersimpan
 
  const data = await $fetch("https://api.eksternal.dev/v1/produk")
  await storage.setItem(kunci, data, { ttl: 300 })
 
  return data
})

storage.setItem(kunci, data, { ttl: 300 }) menyimpan hasil panggilan selama 300 detik. Request berikutnya dilayani langsung dari cache tanpa menyentuh API eksternal — hemat biaya dan lebih cepat.

#Kunci Cache yang Benar

Kunci cache harus unik per variasi data. Jika cache mengikuti user, sertakan id user di kunci. Jika mengikuti locale, sertakan locale. Kunci yang salah menyebabkan data bocor antar pengguna — ini bug yang serius di aplikasi nyata.

#Browser Cache

#Memanfaatkan Cache Browser

Browser cache melayani ulang aset statis seperti gambar, CSS, dan JavaScript tanpa meminta ke server. Atur header cache untuk aset statis:

Cache aset statis

export default defineEventHandler(async (event) => {
  setHeader(event, "Cache-Control", "public, max-age=3600")
  return { ok: true }
})

setHeader(event, "Cache-Control", "public, max-age=3600") memberitahu browser untuk menyimpan respons selama satu jam. Aset yang di-hash seperti file build bisa di-cache lebih lama karena nama filenya berubah saat konten berubah.

#Redis sebagai Storage Backend

Di produksi, useStorage("cache") bisa diarahkan ke Redis atau layanan sejenis sehingga cache dibagikan antar instance server. Konfigurasi backend storage dijelaskan di dokumentasi Nitro — mulailah dari memory storage saat development.

#Static Generation, ISR, dan Deploy Edge

#Perbedaan Strategi

Tiga strategi populer yang sudah kalian kenal dari episode 2:

• Static generation: halaman dirender sekali saat build. Paling cepat, cocok untuk konten yang jarang berubah.
• ISR: halaman statis dengan revalidasi berkala. Konten tetap cepat tapi bisa diperbarui.
• Deploy edge: halaman dirender di lokasi terdekat pengguna.

Semuanya diatur lewat routeRules:

Strategi cache per halaman

export default defineNuxtConfig({
  routeRules: {
    "/produk": { swr: 600 },
    "/tentang": { prerender: true },
    "/dashboard/**": { ssr: false },
  },
})

/produk memakai swr 600 detik (cache dengan revalidasi), /tentang di-prerender menjadi statis, dan area dashboard tetap SSR atau SPA. Satu config mengatur seluruh strategi halaman.

#Membangun Output Statis

Untuk menghasilkan versi statis seluruh situs, gunakan:

npm run generate

npm run generate memproses semua halaman yang bisa di-prerender menjadi file HTML statis di folder output — siap disajikan dari CDN mana pun.

#Optimizing Page Load dan Asset Delivery

#Memuat Lebih Cepat

Beberapa langkah yang langsung berdampak pada waktu muat:

• Preconnect ke domain aset penting agar koneksi dibuka lebih awal.
• Preload font dan gambar kritis.
• Lazy load komponen berat agar tidak ikut di bundle awal.

Resource hints

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: "preconnect", href: "https://images.example.com" },
      ],
    },
  },
})

Resource hint preconnect memberi sinyal ke browser untuk menyiapkan koneksi sebelum benar-benar dibutuhkan. Episode 15 akan membahas optimasi payload lebih detail.

#Monitoring Build Performance

#Waktu Build dan Ukuran Output

Build yang lambat memperlambat seluruh siklus development. Amati dua metrik utama:

time npm run build

time npm run build mengukur durasi build. Metrik kedua adalah ukuran output dan bundle — episode 15 akan memakai nuxi analyze untuk melihat komposisi bundle secara visual.

#Cache Build di CI

Di CI/CD, simpan cache build antar pipeline agar install dan kompilasi lebih cepat. Episode 19 akan membahas konfigurasi CI/CD termasuk cache dependency.

#Penutup

Episode 14 memberi kalian kontrol penuh atas kecepatan: caching data dengan storage Nitro dan TTL, pemanfaatan browser cache, strategi static generation dan ISR per halaman lewat route rules, resource hints untuk mempercepat muat, serta kebiasaan memantau durasi build.

Inti yang harus dibawa pulang:

• Storage Nitro dengan ttl adalah cara termudah men-cache data server.
• Kunci cache harus unik per variasi data untuk mencegah kebocoran.
• Browser cache mengurangi request berulang untuk aset statis.
• routeRules mengontrol strategi prerender, swr, dan ssr per halaman.
• Preconnect dan preload mempercepat pengiriman aset penting.
• Pantau durasi build dan cache dependency di CI.

Di episode 15 selanjutnya kita akan membahas performance optimization — profiling dengan Vue Devtools dan browser tools, optimasi rendering komponen dan ukuran bundle, prefetching links dan resource hints, serta mengurangi JavaScript payload. Angka performa toko kalian akan diukur dan diperbaiki.