Belajar Next.js App Router #7: Server Components vs Client Components

• Apa Itu Server Component?
• Apa Itu Client Component?
• Perbedaan Server Component dan Client Component
• Contoh Server Component
• Contoh Client Component
• Kapan Menggunakan Server Component?
• Kapan Menggunakan Client Component?
• Kesimpulan

Halo teman-teman semuanya. Pada artikel sebelumnya, kita telah mempelajari penggunaan useRouter dan usePathname untuk kebutuhan navigasi di Next.js App Router. Pada artikel ini, kita akan membahas salah satu konsep paling penting dalam App Router, yaitu Server Component dan Client Component.

Memahami perbedaan antara Server Component dan Client Component sangat penting, karena keduanya memiliki peran yang berbeda dan akan sangat mempengaruhi cara kita menulis kode, performa aplikasi, serta keamanan data.

Apa Itu Server Component?

Server Component adalah komponen yang dirender di sisi server. Pada Next.js App Router, semua komponen secara default adalah Server Component, kecuali kita menyatakannya sebagai Client Component.

Karena dijalankan di server, Server Component memiliki beberapa karakteristik utama. Komponen ini bisa langsung mengakses database, membaca environment variable, dan menjalankan logic backend tanpa harus membuat API tambahan. Selain itu, kode Server Component tidak akan dikirim ke browser, sehingga ukuran JavaScript di sisi client menjadi lebih kecil.

Apa Itu Client Component?

Client Component adalah komponen yang dirender di sisi client (browser). Komponen ini digunakan ketika kita membutuhkan interaksi langsung dengan pengguna, seperti menangani event klik, menggunakan state, atau memakai hook tertentu.

Untuk menjadikan sebuah komponen sebagai Client Component, kita perlu menambahkan directive "use client" di baris paling atas file.

Perbedaan Server Component dan Client Component

Perbedaan utama antara Server Component dan Client Component terletak pada tempat eksekusi dan kemampuannya.

Server Component berjalan di server, tidak bisa menggunakan hook seperti useState atau useEffect, dan cocok untuk pengambilan data serta logic backend. Sebaliknya, Client Component berjalan di browser, bisa menggunakan state dan event handler, tetapi tidak bisa mengakses resource server secara langsung seperti database.

Contoh Server Component

Berikut contoh sederhana Server Component:

export default function ServerComponent() {
    const time = new Date().toLocaleString()

    return (
        <div>
            <p>Waktu render di server: {time}</p>
        </div>
    )
}

Komponen di atas akan dirender di server setiap kali halaman diakses atau di-revalidate, tergantung strategi rendering yang digunakan.

Contoh Client Component

Berikut contoh sederhana Client Component:

'use client'

import { useState } from 'react'

export default function ClientComponent() {
    const [count, setCount] = useState(0)

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Tambah
            </button>
        </div>
    )
}

Karena menggunakan useState dan event handler, komponen ini harus dijalankan di sisi client.

Kapan Menggunakan Server Component?

Server Component sebaiknya digunakan ketika kita membutuhkan pengambilan data dari database, mengakses API internal, atau menampilkan konten yang tidak membutuhkan interaksi langsung dari user. Pendekatan ini membantu menjaga performa aplikasi dan mengurangi beban JavaScript di browser.

Kapan Menggunakan Client Component?

Client Component digunakan ketika kita membutuhkan interaksi, seperti form input, tombol, modal, atau fitur yang bergantung pada state dan lifecycle di browser. Biasanya, Client Component akan dibungkus di dalam Server Component agar tetap menjaga performa aplikasi secara keseluruhan.

Kesimpulan

Pada artikel ini, kita telah mempelajari perbedaan antara Server Component dan Client Component pada Next.js App Router, mulai dari konsep dasar, karakteristik, hingga kapan masing-masing komponen sebaiknya digunakan. Dengan memahami konsep ini, kita dapat menulis aplikasi Next.js yang lebih efisien, aman, dan mudah dikembangkan.

Pada artikel selanjutnya, kita akan membahas data fetching di Server Component, termasuk cara mengambil data, caching, dan strategi rendering di Next.js App Router.

Terima Kasih