Apa itu Data Fetching di Next.js

Sebagian besar aplikasi web modern membutuhkan data dari sumber lain. Misalnya dari API, database, atau layanan pihak ketiga.

Proses mengambil data tersebut dikenal sebagai data fetching.

Di React biasa, data biasanya diambil menggunakan useEffect. Namun Next.js menyediakan pendekatan yang lebih fleksibel dan seringkali lebih efisien.

Dengan Next.js kita bisa melakukan data fetching:

• di server

• di client

• saat build

• atau secara on-demand

Fleksibilitas ini memungkinkan developer memilih strategi terbaik berdasarkan kebutuhan aplikasi.

Misalnya:

• blog biasanya cocok menggunakan data statis

• dashboard membutuhkan data real-time

• halaman produk mungkin perlu kombinasi keduanya

Karena itu memahami cara data fetching di Next.js sangat penting untuk membangun aplikasi yang cepat dan scalable.

Data Fetching Menggunakan Server Component

Secara default, komponen di folder app adalah Server Component. Artinya kode tersebut berjalan di server, bukan di browser.

Ini memungkinkan kita melakukan data fetching langsung di dalam komponen tanpa perlu menggunakan useEffect.

Contoh sederhana mengambil data dari API:

export default async function PostsPage() {

  const res = await fetch("https://jsonplaceholder.typicode.com/posts")

  const posts = await res.json()

  return (
    <main>
      <h1>Posts</h1>

      {posts.slice(0, 5).map((post: any) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </main>
  )
}

Beberapa keuntungan menggunakan server component:

• data diambil langsung dari server

• tidak menambah beban JavaScript di browser

• lebih baik untuk SEO

Pendekatan ini sering digunakan untuk halaman seperti:

• blog

• artikel

• halaman produk

• landing page

Data Fetching di Client Component

Ada beberapa kasus di mana data harus diambil di browser, misalnya ketika data bergantung pada interaksi pengguna.

Dalam situasi seperti ini kita bisa menggunakan Client Component.

Contohnya:

"use client"

import { useEffect, useState } from "react"

export default function UsersPage() {

  const [users, setUsers] = useState([])

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUsers(data))
  }, [])

  return (
    <main>
      <h1>Users</h1>

      {users.map((user: any) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </main>
  )
}

Pendekatan ini cocok untuk:

• dashboard

• aplikasi real-time

• halaman dengan banyak interaksi user

Namun perlu diingat bahwa data yang diambil di client biasanya tidak sebaik server untuk SEO.

Caching di Next.js Fetch

Salah satu fitur menarik di Next.js adalah built-in caching pada fungsi fetch.

Secara default, Next.js akan melakukan caching pada request tertentu untuk meningkatkan performa.

Contoh penggunaan caching:

const res = await fetch(
  "https://api.example.com/posts",
  {
    cache: "force-cache"
  }
)

Mode caching yang tersedia antara lain:

force-cache

Data akan di-cache dan digunakan kembali pada request berikutnya.

no-store

Data selalu diambil ulang dari server tanpa caching.

Contoh:

const res = await fetch(
  "https://api.example.com/posts",
  {
    cache: "no-store"
  }
)

Pendekatan ini cocok untuk data yang selalu berubah, seperti dashboard atau data statistik.

Revalidasi Data (ISR)

Selain caching, Next.js juga menyediakan fitur revalidation.

Fitur ini memungkinkan halaman statis diperbarui secara otomatis setelah waktu tertentu.

Contoh implementasi:

const res = await fetch(
  "https://api.example.com/posts",
  {
    next: { revalidate: 60 }
  }
)

Artinya data akan diperbarui setiap 60 detik.

Keuntungan menggunakan revalidation:

• performa tetap cepat

• data tidak terlalu usang

• tidak perlu rebuild seluruh aplikasi

Teknik ini sering digunakan untuk:

• blog

• halaman artikel

• katalog produk

Best Practice Data Fetching di Next.js

Agar aplikasi tetap cepat dan mudah dipelihara, ada beberapa praktik yang sering digunakan developer ketika melakukan data fetching di Next.js.

1. Gunakan Server Component jika memungkinkan

Data fetching di server biasanya lebih efisien dibandingkan client.

2. Hindari fetch berulang

Jika data bisa di-cache, manfaatkan caching yang disediakan Next.js.

3. Gunakan ISR untuk konten yang jarang berubah

Ini sangat cocok untuk website seperti blog atau dokumentasi.

4. Pisahkan logic API

Biasanya developer membuat folder seperti:

src/lib/api.ts

Contoh fungsi helper:

export async function getPosts() {

  const res = await fetch("https://api.example.com/posts")

  return res.json()
}

Dengan cara ini kode menjadi lebih rapi dan mudah digunakan kembali.

Penutup

Data fetching adalah bagian penting dalam membangun aplikasi Next.js.

Framework ini memberikan berbagai cara untuk mengambil data dengan pendekatan yang lebih fleksibel dibandingkan React biasa.

Dalam artikel ini kita sudah membahas beberapa hal penting:

• data fetching di server component

• data fetching di client component

• sistem caching bawaan Next.js

• penggunaan revalidation (ISR)

Memahami strategi ini akan membantu Anda membangun aplikasi yang lebih cepat, lebih efisien, dan lebih ramah SEO.

Pada artikel berikutnya kita akan membahas API Routes di Next.js, yaitu cara membuat backend API langsung di dalam aplikasi Next.js tanpa perlu framework tambahan.