Belajar Gatsby - Konsep Dasar & Arsitektur Utama

#Pendahuluan

Setelah memahami sejarah dan posisi Gatsby, sekarang kita masuk ke bagian paling penting: bagaimana Gatsby bekerja di balik layar. Kalian tidak perlu menghafal setiap detail internal, tapi memahami arsitekturnya akan membuat semua episode praktik berikutnya jauh lebih masuk akal.

Episode 2 membedah data layer GraphQL, proses build, struktur project, sistem query, dan routing. Ini adalah fondasi konseptual yang akan kalian pakai setiap hari selama mengembangkan Gatsby.

#Data Layer Gatsby dengan GraphQL

#GraphQL sebagai Tulang Punggung Data

Gatsby membangun sebuah graph di memori yang berisi seluruh data situs: file, Markdown, CMS, API, dan metadata. Graph ini di-query dengan GraphQL. Keunggulannya: kalian hanya meminta data yang dibutuhkan, dan hasilnya ter-typed dengan jelas.

Source plugins bertugas menarik data masuk. Contohnya gatsby-source-filesystem membaca file lokal, gatsby-source-contentful menarik konten dari Contentful, dan gatsby-source-graphql mengambil data dari API GraphQL eksternal.

#Build Process: Source, Transform, Generate

Seluruh alur Gatsby mengikuti tiga tahap utama:

source → transform → generate

• Source: plugin menarik data mentah ke node GraphQL.
• Transform: transformer plugin mengubah data, misalnya Markdown menjadi HTML dan Sharp menghasilkan gambar responsif.
• Generate: Gatsby merender halaman menjadi file HTML statis.

Saat kalian menjalankan gatsby build, tiga tahap ini dieksekusi secara berurutan dan hasilnya ditulis ke folder public.

#Struktur Project Gatsby

#File dan Folder Inti

Sebuah project Gatsby standar memiliki struktur seperti ini:

my-gatsby-site/
  src/
    pages/
    components/
    templates/
    images/
  content/
    posts/
  gatsby-config.js
  gatsby-node.js
  gatsby-browser.js
  gatsby-ssr.js
  package.json

Peran masing-masing folder dan file:

• src/pages: file .jsx di sini otomatis menjadi route.
• src/components: komponen reusable seperti header dan footer.
• src/templates: template untuk halaman yang dibuat programatis.
• gatsby-config.js: konfigurasi utama, situs metadata, dan daftar plugin.
• gatsby-node.js: API untuk membuat halaman dinamis dan memodifikasi schema.
• gatsby-browser.js: API lifecycle untuk kode yang berjalan di browser.

#Page Query vs Static Query

#Page Query

Page query hanya bisa dipakai di file page atau template. Query didefinisikan sebagai named export query dan dijalankan saat build:

Page query di file page

import { graphql } from "gatsby"
 
export const query = graphql`
  query HalamanTentang {
    site {
      siteMetadata {
        title
      }
    }
  }
`

Hasil query otomatis tersedia sebagai prop data pada komponen halaman.

#Static Query dengan useStaticQuery

Komponen non-page tidak bisa memakai page query. Untuk itu Gatsby menyediakan useStaticQuery:

Static query di komponen

import { useStaticQuery, graphql } from "gatsby"
 
const Header = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)
  return <header>{data.site.siteMetadata.title}</header>
}

Hook useStaticQuery hanya boleh dipanggil satu kali per komponen dan dijalankan saat build time.

#Routing File-Based dan Client-Only Routes

#File-Based Routing

Routing Gatsby berbasis file: src/pages/index.jsx menjadi /, src/pages/about.jsx menjadi /about/, dan src/pages/blog/first-post.jsx menjadi /blog/first-post/. Tidak perlu konfigurasi router manual.

#Client-Only Routes

Kadang kita butuh halaman yang hanya ada di client, misalnya rute aplikasi setelah login. Caranya dengan properti matchPath di page:

Client-only route dengan matchPath

const AppPage = () => <h1>Halaman Aplikasi</h1>
 
export default AppPage
 
export function Head() {
  return <title>Aplikasi</title>
}
 
AppPage.matchPath = "/app/*"

Properti matchPath: "/app/*" memberitahu Gatsby bahwa rute ini ditangani sepenuhnya di client. Ini berguna untuk aplikasi yang memerlukan autentikasi — akan kita bahas detail di episode 13.

#Static Assets, Image Optimization, dan Prefetching

#Penanganan Asset dan Gambar

Gatsby mengoptimalkan gambar secara otomatis melalui gatsby-plugin-image dan Sharp: format modern seperti WebP dan AVIF, ukuran responsif, lazy loading, serta placeholder blur. Episode 6 akan membahasnya mendalam.

#Prefetching Halaman

Salah satu fitur yang membuat Gatsby terasa sangat cepat: saat pengguna mengarahkan kursor ke tautan Link dari Gatsby, halaman tujuan langsung di-prefetch sehingga navigasi terasa instan. Ini perilaku bawaan, bukan plugin tambahan.

#Penutup

Episode 2 memberikan peta konseptual Gatsby: data layer GraphQL yang menyatukan banyak sumber, proses build source-transform-generate, struktur project, sistem page query dan static query, serta routing file-based dan client-only.

Inti yang harus dibawa pulang:

• Data layer GraphQL menyatukan seluruh sumber data dalam satu graph.
• Alur build selalu source, transform, lalu generate.
• src/pages menentukan route; sisanya dikelola gatsby-node.
• Page query untuk file page; useStaticQuery untuk komponen.
• matchPath membuat client-only routes.
• Gatsby mengoptimalkan gambar dan melakukan prefetching tautan secara bawaan.

Di episode 3 selanjutnya kita akan praktik langsung: membuat project Gatsby dengan CLI, menjelajahi struktur yang terbentuk, menjalankan dev server, dan menambahkan plugin dasar. Buka terminal kalian — saatnya kode nyata.