Belajar Next.js App Router #8: Data Fetching di Server Component

• Data Fetching di Server Component
• Contoh Data Fetching Sederhana
• Mekanisme Cache pada Fetch
• Revalidasi Data
• Data Fetching vs API Route
• Kesimpulan

Halo teman-teman semuanya. Pada artikel sebelumnya, kita telah membahas perbedaan antara Server Component dan Client Component pada Next.js App Router. Pada artikel ini, kita akan fokus pada salah satu keunggulan utama Server Component, yaitu data fetching langsung di server.

Dengan App Router, kita tidak selalu membutuhkan API khusus hanya untuk mengambil data. Kita bisa melakukan proses pengambilan data langsung di Server Component dengan cara yang lebih sederhana, aman, dan efisien.

Data Fetching di Server Component

Pada Server Component, kita dapat melakukan data fetching secara langsung, baik menggunakan fetch, mengambil data dari database, maupun memanggil API internal. Karena dijalankan di server, proses ini tidak akan membebani browser dan data sensitif tetap aman.

Secara default, Next.js sudah mengoptimalkan proses fetch pada Server Component, termasuk dukungan caching dan revalidasi.

Contoh Data Fetching Sederhana

Sebagai contoh, kita akan mengambil data dari API publik menggunakan fetch.

Silahkan teman-teman buat atau ubah file berikut:

app/posts/page.tsx

Isi dengan kode berikut:

// type post
type Post = {
    id: number
    title: string
}

// fetch data from API
async function getPosts(): Promise<Post[]> {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts')
    return response.json()
}

export default async function PostsPage() {

    // fetch data
    const posts = await getPosts()

    return (
        <div className="min-h-screen p-4">
            <div className="max-w-4xl mx-auto">
                {/* Header */}
                <div className="text-center mb-10">
                    <h1 className="text-3xl font-bold mb-2">
                        Daftar Post
                    </h1>
                    <p>
                        Menampilkan {posts.slice(0, 5).length} dari {posts.length} post
                    </p>
                </div>

                {/* List Posts */}
                <div className="rounded-lg shadow-md p-6">
                    <ul className="space-y-4">
                        {posts.slice(0, 5).map(post => (
                            <li 
                                key={post.id}
                                className="p-4 border border-gray-400 rounded-lg bg-gray-500 transition-colors"
                            >
                                <div className="flex items-start">
                                    <div className="flex-shrink-0 w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center mr-3 font-semibold">
                                        {post.id}
                                    </div>
                                    <div>
                                        <span className="font-medium">
                                            {post.title}
                                        </span>
                                    </div>
                                </div>
                            </li>
                        ))}
                    </ul>

                    {/* Info */}
                    <div className="mt-8 pt-6 border-t border-gray-100">
                        <p className="text-sm text-gray-500 text-center">
                            Data diambil dari JSONPlaceholder API
                        </p>
                    </div>
                </div>
            </div>
        </div>
    )
}

Karena ini adalah Server Component, kita bisa langsung menggunakan async dan await di dalam komponen halaman.

Jika kita akses projectnya di http://localhost:3000/posts. Maka kurang lebih hasilnya seperti berikut ini.

Mekanisme Cache pada Fetch

Secara default, fetch pada Server Component akan menggunakan cache. Artinya, jika request yang sama dipanggil berulang kali, Next.js dapat menyajikan data dari cache untuk meningkatkan performa.

Jika kita ingin memastikan data selalu diambil ulang, kita bisa menonaktifkan cache dengan opsi berikut:

await fetch('https://jsonplaceholder.typicode.com/posts', {
    cache: 'no-store'
})

Pendekatan ini cocok digunakan untuk data yang harus selalu real-time.

Revalidasi Data

Selain no-store, Next.js juga menyediakan mekanisme revalidasi data. Dengan revalidasi, data akan diperbarui secara berkala sesuai interval yang kita tentukan.

Contoh penggunaan revalidasi:

await fetch('https://jsonplaceholder.typicode.com/posts', {
    next: { revalidate: 60 }
})

Dengan konfigurasi ini, data akan diambil ulang setiap 60 detik.

Data Fetching vs API Route

Dengan Server Component, kita sering kali tidak perlu membuat API Route hanya untuk kebutuhan internal aplikasi. Data bisa langsung diambil di Server Component, sehingga alur kode menjadi lebih sederhana dan mudah dibaca.

Namun, API Route atau Route Handler tetap dibutuhkan jika data tersebut akan dikonsumsi oleh aplikasi lain, seperti mobile app atau layanan pihak ketiga.

Kesimpulan

Pada artikel ini, kita telah mempelajari cara melakukan data fetching di Server Component pada Next.js App Router, mulai dari penggunaan fetch, mekanisme cache, hingga revalidasi data. Pendekatan ini membuat pengambilan data menjadi lebih sederhana, aman, dan optimal.

Pada artikel selanjutnya, kita akan membahas metadata dan SEO di Next.js App Router, termasuk cara mengatur title dan meta description untuk setiap halaman.

Terima Kasih