Belajar Gatsby - Sejarah, Latar Belakang & Mengapa Membutuhkan Gatsby

#Pendahuluan

Di episode 0 kalian sudah menyiapkan toolchain. Sekarang saatnya memahami mengapa Gatsby ada. Setiap teknologi lahir untuk menyelesaikan masalah; Gatsby lahir dari kekecewaan terhadap situs web yang lambat dan penuh JavaScript yang tidak perlu.

Episode 1 menelusuri perjalanan Gatsby dari project eksperimental hingga menjadi salah satu static site generator paling berpengaruh, lalu membedah masalah-masalah nyata yang diselesaikannya. Kalian akan paham kapan Gatsby adalah pilihan tepat dan kapan sebaiknya memakai alternatif lain.

#Sejarah dan Evolusi Gatsby

#Kelahiran Gatsby

Gatsby dibuat oleh Kyle Mathews dan pertama kali dirilis pada tahun 2015. Awalnya Gatsby adalah static site generator yang memakai React untuk menghasilkan halaman statis — waktu itu konsep ini masih terasa aneh karena React lebih dikenal untuk single-page application. Nama "Gatsby" terinspirasi dari novel klasik The Great Gatsby, merepresentasikan era web modern yang kaya.

#Evolusi Versi 1 hingga 5

Setiap versi besar membawa lompatan arsitektural:

• Versi 1: static site generator React sederhana, template berbasis file.
• Versi 2: memperkenalkan GraphQL data layer dan sumber data plugin pertama.
• Versi 3: menghadirkan gatsby-plugin-image generasi baru dan akselerasi build.
• Versi 4: menambahkan incremental builds, SSR, dan Deferred Static Generation.
• Versi 5: dukungan React 18, Slice API, dan image CDN.

Perjalanan ini menunjukkan satu hal: Gatsby berevolusi dari generator halaman sederhana menjadi sistem build lengkap yang menggabungkan data dari mana saja menjadi situs statis yang cepat.

#Posisi Gatsby dalam JAMstack dan Headless Architecture

#Arsitektur JAMstack

Gatsby adalah pemain kunci dalam arsitektur JAMstack: JavaScript untuk interaktivitas, API (terutama GraphQL) untuk data, dan Markup statis untuk konten. Karena HTML sudah dirender saat build time, tidak ada server yang harus memproses request, sehingga situs bisa di-serve dari CDN global dengan latensi minimal.

#Headless Architecture

Gatsby bersifat headless-friendly: ia tidak memaksa kalian memakai CMS tertentu. Konten bisa berasal dari headless CMS seperti Contentful dan Strapi, file Markdown lokal, atau API eksternal — semuanya ditarik ke data layer yang sama. Pemisahan konten dari presentasi ini yang membuat Gatsby populer untuk situs perusahaan dan dokumentasi.

Perhatikan pola data yang menjadi fondasi Gatsby:

source → transform → graph → generate

#Masalah yang Diselesaikan Gatsby

#Build-Time Rendering untuk Performa dan SEO

Masalah terbesar aplikasi web lama: HTML kosong diisi JavaScript saat browser, membuat halaman lambat dan sulit di-index search engine. Gatsby membaliknya — HTML dirender saat build time, JavaScript hanya untuk interaktivitas. Hasilnya: waktu muat sangat cepat dan SEO bekerja tanpa teknik-teknik rumit.

#Data Terintegrasi dari CMS, MDX, dan API

Sebelum Gatsby, mengabungkan data dari tiga sumber berbeda biasanya butuh kode kustom yang rapuh. Gatsby menyatukan semuanya ke dalam satu graph yang bisa di-query dengan GraphQL:

Query lintas sumber data

query HalamanHome {
  markdownRemark {
    title
  }
  contentfulArticle {
    judul
  }
  site {
    siteMetadata {
      title
    }
  }
}

Satu query GraphQL bisa menarik konten dari Markdown, CMS, dan metadata situs sekaligus. Ini paradigma yang jauh lebih produktif daripada memanggil tiga API secara manual.

#Developer Experience dan Ekosistem Plugin

#Pengalaman Developer yang Mulus

Gatsby menawarkan hot reload yang instan, error overlay yang informatif, dan built-in code splitting. Kalian juga bisa melihat seluruh data melalui GraphiQL di http://localhost:8000/___graphql saat menjalankan gatsby develop.

#Ekosistem Plugin yang Luas

Kekuatan terbesar Gatsby adalah ribuan plugin komunitas: sumber data, transformasi gambar, SEO, analytics, hingga PWA. Kalian tidak perlu menulis semuanya dari nol — cukup install dan konfigurasi:

npm install gatsby-source-filesystem gatsby-plugin-image
npm install gatsby-plugin-sharp gatsby-transformer-sharp

Ekosistem ini yang membuat Gatsby cocok untuk tim kecil yang ingin hasil production-grade tanpa menulis infrastruktur sendiri.

#Kapan Memakai Gatsby dan Kapan Tidak

#Cocok untuk Gatsby

Gatsby unggul untuk blog, situs dokumentasi, landing page, situs e-commerce statis, dan aplikasi yang kontennya dominan. Jika konten bisa disajikan statis dan butuh SEO, Gatsby adalah pilihan kuat.

#Kurang Cocok

Untuk aplikasi yang sangat dinamis — dashboard realtime, banyak interaksi per-user yang unik — pendekatan statis kurang efisien. Pada kasus ini, pertimbangkan aplikasi React biasa dengan SSR seperti Next.js. Memahami batas ini penting agar kalian tidak salah pilih arsitektur.

#Penutup

Episode 1 menjelaskan dari mana Gatsby berasal dan masalah apa yang diselesaikannya: situs statis yang cepat dan SEO-friendly dari sumber data yang beragam, dibangun di atas React dengan ekosistem plugin yang luas.

Inti yang harus dibawa pulang:

• Gatsby lahir pada 2015 dan berevolusi dari generator sederhana hingga versi 5.
• JAMstack memisahkan JavaScript, API, dan markup; Gatsby mengeksekusinya dengan baik.
• Data layer GraphQL menyatukan CMS, MDX, dan API dalam satu query.
• Build-time rendering memberi keunggulan performa dan SEO.
• Plugin ecosystem membuat Gatsby efisien untuk produksi.
• Pahami batasnya: untuk aplikasi sangat dinamis, pertimbangkan alternatif lain.

Di episode 2 selanjutnya kita akan membedah konsep dasar dan arsitektur utama — cara kerja data layer GraphQL dan source plugins, proses build source-transform-generate, struktur project, serta perbedaan page query dan static query. Siapkan gatsby --version kalian, karena mulai episode 3 kita akan langsung praktik.