Belajar Gatsby - API Integration & Caching

#Pendahuluan

Situs Gatsby hampir selalu perlu data dari luar — API produk, layanan eksternal, atau CMS. Pertanyaan kuncinya bukan "apakah bisa", melainkan "kapan": saat build time atau saat runtime. Pilihan ini menentukan performa dan kesegaran data.

Episode 14 membahas fetching saat build time dan runtime, strategi caching, incremental builds, serta selective sourcing untuk mempercepat build.

#Fetching API saat Build Time vs Runtime

#Build Time untuk Data yang Jarang Berubah

Data yang tidak berubah sering — seperti daftar produk atau dokumentasi — sebaiknya di-fetch saat build. Pola paling umum adalah di gatsby-node.js lewat createPages:

Fetch API di createPages

exports.createPages = async ({ actions }) => {
  const { createPage } = actions
  const response = await fetch("https://api.example.com/products")
  const products = await response.json()
 
  products.forEach((product) => {
    createPage({
      path: `/products/${product.slug}`,
      component: require.resolve("./src/templates/product.js"),
      context: { product },
    })
  })
}

await fetch(...) dijalankan sekali per build; hasilnya dirender menjadi halaman statis. Pengunjung tidak pernah menunggu API — data sudah ada di HTML.

#Runtime untuk Data Pribadi dan Realtime

Untuk data per pengguna atau yang sering berubah, fetch di client dengan useEffect:

Fetch di runtime

import { useEffect, useState } from "react"
 
const KursHarian = () => {
  const [nilai, setNilai] = useState(null)
 
  useEffect(() => {
    fetch("https://api.example.com/kurs")
      .then((res) => res.json())
      .then(setNilai)
  }, [])
 
  return <p>Kurs hari ini: {nilai ?? "memuat..."}</p>
}

useEffect memastikan fetch hanya terjadi di browser, bukan saat build. Gabungkan keduanya sesuai sifat data: statis di build, dinamis di client.

#Strategi Caching untuk Situs Statis

#Cache Local untuk API Eksternal

Panggilan API eksternal di gatsby-node.js berulang setiap build dan bisa lambat. Gatsby menyediakan API cache persisten:

Cache hasil API antar build

exports.sourceNodes = async ({ cache, actions, createContentDigest }) => {
  const { createNode } = actions
  let data = await cache.get("produk-api")
 
  if (!data) {
    const res = await fetch("https://api.example.com/products")
    data = await res.json()
    await cache.set("produk-api", data)
  }
 
  data.forEach((item) => {
    createNode({
      ...item,
      id: `Produk-${item.id}`,
      internal: {
        type: "ProdukApi",
        contentDigest: createContentDigest(item),
      },
    })
  })
}

cache.get dan cache.set menyimpan data antar build di folder .cache. Build kedua tidak memanggil API lagi sampai cache dihapus — strategi ini bisa memangkas waktu build secara drastis.

#Cache di Browser

Untuk fetch runtime, manfaatkan HTTP caching API eksternal. Pastikan response API mengirim header cache yang tepat agar browser tidak mengulang request setiap kali.

#Incremental Builds dan Update Konten

#Hanya Halaman yang Berubah

Incremental builds hanya membangun halaman yang berubah, bukan seluruh situs. Ini tersedia di Gatsby Cloud dan sebagian platform hosting saat memakai Content Sync. Dampaknya: waktu build dari menit menjadi detik untuk situs besar.

#Alur Update Konten

Dengan incremental builds, alur kerja yang nyaman adalah: konten diubah di CMS, webhook memicu build, dan hanya halaman terkait yang diregenerasi. Situs tetap segar tanpa mengorbankan kecepatan deploy.

#Mengurangi Build Time dengan Selective Sourcing

#Batasi Sumber Data

Sumber data yang besar memperlambat build. Selective sourcing berarti hanya menarik data yang benar-benar dibutuhkan: atur folder path di gatsby-source-filesystem hanya ke direktori yang dipakai, dan gunakan filter serta limit pada query CMS agar node yang tidak perlu tidak ter-sourcing.

#Paraleilkan Build

Node.js bisa memproses beberapa pekerjaan sekaligus lewat environment variable:

GATSBY_CPU_COUNT=4 gatsby build

GATSBY_CPU_COUNT mengontrol berapa banyak worker yang dipakai Gatsby. Sesuaikan dengan jumlah core mesin CI kalian agar build lebih cepat tanpa membebani memori berlebihan.

#Penutup

Episode 14 menuntaskan integrasi API dan caching: membedakan fetch build time dan runtime, memakai cache persisten Gatsby, memahami incremental builds, serta selective sourcing untuk build yang lebih cepat.

Inti yang harus dibawa pulang:

• Data statis di-fetch saat build di gatsby-node.js.
• Data per pengguna di-fetch di client dengan useEffect.
• cache.get dan cache.set menyimpan hasil API antar build.
• Incremental builds hanya membangun halaman yang berubah.
• Selective sourcing mengurangi node yang tidak dipakai.
• GATSBY_CPU_COUNT mengontrol paralelisme build.

Di episode 15 selanjutnya kita masuk fase advanced: performance optimization — menganalisis ukuran bundle dan kecepatan halaman, preloading dan code splitting, lazy loading, serta peningkatan Core Web Vitals dan Lighthouse.