Sign in Subscribe

Bingung Server vs Client Component? Kita Kupas Tuntas Bedanya, Anti Pusing!

Bingung Server vs Client Component? Kita Kupas Tuntas Bedanya, Anti Pusing!
Photo by James Wiseman/Unsplash

Pernah nggak sih lagi ngoding React, terutama di lingkungan Next js, terus tiba tiba mikir, ini komponen enaknya dijadiin Server Component apa Client Component ya Kenapa harus pusing pusing mikirin beginian Padahal dulu semua komponen ya Client Component aja kan Nah kalau pertanyaan itu sering muncul di kepala tenang aja kita sama kok. Ini bukan cuma kamu doang yang ngerasa sedikit ngawang sama konsep baru ini. Justru, itu artinya kamu sudah berada di jalur yang benar buat jadi developer yang lebih aware dan jago.

Konsep Server Component dan Client Component ini memang lumayan mengubah paradigma kita dalam membangun aplikasi web. Dulu semua serba JavaScript di browser sekarang sebagian bisa dikerjakan di server. Ini bukan cuma beda di teknisnya aja tapi juga fundamentalnya cara kita merancang arsitektur aplikasi. Kita tahu banget kadang penjelasan di dokumentasi resmi suka bikin kening berkerut. Makanya, kali ini kita mau bedah tuntas bedanya Server Component dan Client Component ini biar kamu nggak pusing lagi. Anggap aja kita lagi ngopi bareng sambil bahas codingan seru.

Mengenal Server Component Si Pekerja Senyap di Belakang Layar

Oke, yuk kita mulai dari Server Component. Bayangin Server Component itu seperti barista yang siap sedia di belakang meja bar. Dia menyiapkan semua bahan mentah, meracik kopi, dan memastikan semuanya siap saji sebelum dihidangkan ke pelanggan. Pelanggan cuma lihat kopinya sudah jadi dan tinggal dinikmati.

Apa Itu Server Component

Secara sederhana, Server Component itu adalah komponen React yang dirender alias diproses di sisi server. Artinya, semua JavaScript yang ada di komponen itu dieksekusi di server bukan di browser pengguna. Outputnya Bukan lagi JavaScript mentah yang dikirim ke browser tapi bisa berupa HTML atau sebuah format spesial dari React yang dikenal sebagai React Server Components Payload. Nah payload ini yang kemudian dikirim ke browser.

Cara Kerja Server Component

Ketika sebuah permintaan datang ke server, Next js akan mengidentifikasi komponen mana yang merupakan Server Component. Komponen ini kemudian akan mengambil data jika ada misalnya dari database atau API internal. Setelah semua data terkumpul dan komponen dirender, hasilnya dikonversi menjadi HTML dan React Server Components Payload. Payload ini yang akan di gabungkan dengan komponen Client Side dan dikirim ke browser. Yang asik dari proses ini, browser tidak perlu mendownload dan mengeksekusi JavaScript dari Server Component. Jadi lebih ringan dan cepat.

Kapan Kita Pakai Server Component

Server Component ini paling cocok buat tugas tugas yang bersifat "data heavy" atau yang butuh akses langsung ke sumber daya di server.

  • Data Fetching: Ini salah satu kekuatan utama Server Component. Kamu bisa langsung akses database atau filesystem dari dalam komponen tanpa perlu bikin API endpoint terpisah. Lebih simpel dan cepat.
  • Akses Sumber Daya Backend: Misalnya membaca file konfigurasi sensitif atau memanggil layanan backend yang tidak boleh diakses langsung oleh browser.
  • Mengurangi JavaScript Client Side: Kalau komponenmu cuma buat nampilin data statis atau minim interaksi, pakai Server Component bisa sangat mengurangi ukuran bundle JavaScript yang harus didownload browser. Ini bikin website makin ngebut.
  • SEO Lebih Baik: Karena konten utama sudah ada dalam bentuk HTML saat pertama kali di load, mesin pencari lebih gampang mengindeksnya. Mantap buat SEO.
  • Keamanan: Informasi sensitif atau logika bisnis yang tidak boleh terekspos ke browser bisa tetap aman di server.

Contoh Sederhana Server Component

Bayangkan kita punya blog. Untuk menampilkan daftar postingan atau detail satu postingan, kita bisa pakai Server Component.

jsx
// app/blog/page.js
// Ini otomatis Server Component di Next.js App Routerimport db from 'lib/db'; // Asumsi ini koneksi ke databaseasync function getBlogPosts() {
  const posts = await db.getAllPosts();
  return posts;
}export default async function BlogPage() {
  const posts = await getBlogPosts();
  return (
    
      Daftar Postingan Blog Kita
      
        {posts.map((post) => (
          
            {post.title}
            {post.summary}
          
        ))}
      
    
  );
}

Lihat kan, kita bisa langsung await fetching data dari database di dalam komponen. Nggak perlu useEffect atau useState buat ngurusin loading state. Simpel banget.

Mengenal Client Component Si Interaktif dan Responsif

Nah, kalau Server Component itu barista di belakang bar, Client Component ini ibarat cangkir kopi yang sudah jadi dan siap disajikan ke pelanggan. Cangkir ini yang akan berinteraksi langsung dengan pelanggan bisa dipegang bisa diminum dan bisa juga dijatuhkan.

Apa Itu Client Component

Client Component adalah komponen React yang kita sudah kenal selama ini. Mereka sepenuhnya dirender di sisi client alias di browser pengguna. Untuk bisa berfungsi, mereka butuh JavaScript yang didownload dan dieksekusi oleh browser. Ini adalah komponen komponen yang memberikan interaktivitas pada aplikasi kita.

Cara Kerja Client Component

Saat browser menerima HTML dari server yang mungkin mengandung placeholder untuk Client Component, browser akan mulai mendownload bundle JavaScript yang dibutuhkan. Setelah JavaScript ini di download dan dieksekusi, React akan mengambil alih "menghidupkan" placeholder tersebut dengan kode JavaScript yang sesungguhnya. Proses ini dikenal sebagai "hydration". Setelah terhidrasi, komponen ini sepenuhnya interaktif dan bisa merespons input dari pengguna.

Kapan Kita Pakai Client Component

Client Component sangat esensial buat semua hal yang butuh interaksi langsung dengan pengguna atau mengakses fitur fitur browser.

  • Interaktivitas: Ini poin paling krusial. Tombol, form, carousel, modal, toggle, semua yang butuh onClick, onChange, atau event handler lainnya.
  • State Management: useState dan useReducer hanya bisa digunakan di Client Component. Jadi, kalau komponenmu butuh menyimpan dan mengubah state lokal, itu pasti Client Component.
  • Lifecycle Hooks: useEffect dan useLayoutEffect juga hanya bisa dipakai di Client Component buat ngurusin efek samping atau manipulasi DOM.
  • Browser APIs: Kalau kamu butuh akses localStorage, geolocation, webcam, atau fitur fitur browser lainnya, Client Component adalah jawabannya.
  • Animasi dan Transisi: Efek efek visual yang dinamis seringkali butuh JavaScript di client.
  • Real time Updates: Aplikasi chat atau notifikasi yang terus update secara real time biasanya mengandalkan Client Component.

Contoh Sederhana Client Component

Mari kita buat tombol counter sederhana.

jsx
// app/components/CounterButton.js
'use client'; // Ini dia yang bikin jadi Client Componentimport { useState } from 'react';export default function CounterButton() {
  const [count, setCount] = useState(0);

Kunci untuk mengubah sebuah komponen menjadi Client Component di Next js App Router adalah directive 'use client' di bagian paling atas file. Tanpa ini, secara default komponen akan dianggap sebagai Server Component.

Perbedaan Mendasar Server vs Client Component

Sekarang setelah kita tahu masing masing, yuk kita rangkum perbedaan utamanya biar lebih jelas dan anti pusing.

Lokasi Rendering

  • Server Component: Dirender di server. Hasilnya berupa HTML atau payload React Server Components.
  • Client Component: Dirender di browser. Membutuhkan JavaScript untuk dieksekusi di client.

Ketersediaan JavaScript pada Client

  • Server Component: Hampir tidak ada JavaScript yang dikirim ke browser untuk Server Component itu sendiri. Ini membuat bundle JavaScript lebih kecil.
  • Client Component: Seluruh kode JavaScript komponen dikirim ke browser dan dieksekusi di sana.

Interaktivitas dan Hooks

  • Server Component: Tidak bisa menggunakan useState, useEffect, atau event handler seperti onClick. Mereka pasif dan hanya menampilkan data.
  • Client Component: Sepenuhnya interaktif. Bisa menggunakan semua hooks React seperti useState, useEffect, useContext, dan event handler lainnya.

Data Fetching

  • Server Component: Bisa langsung mengakses sumber data backend (database, filesystem) atau API internal secara aman dan efisien.
  • Client Component: Harus mengambil data melalui API endpoint yang terekspos ke publik (misalnya menggunakan fetch ke /api/something).

Akses ke Lingkungan

  • Server Component: Punya akses penuh ke Node js API, environment variables server side.
  • Client Component: Punya akses ke Web API (DOM, localStorage, window), environment variables client side.

SEO dan Initial Load Performance

  • Server Component: Umumnya lebih baik untuk SEO karena konten sudah ada di HTML yang pertama kali diterima browser. Waktu loading awal juga lebih cepat karena sedikit JS yang perlu didownload.
  • Client Component: Untuk SEO, membutuhkan pre rendering (SSR atau SSG) agar kontennya bisa diindeks. Waktu loading awal bisa sedikit lebih lambat karena perlu download dan eksekusi JS.

Kapan Memilih yang Mana Ini Dia Panduannya

Nah ini pertanyaan jutaan dolar. Pilih yang mana Kalau bingung, kita bisa pegang prinsip sederhana ini.

Defaultkan ke Server Component.

Serius. Mulai dari Server Component. Kenapa Karena Server Component menawarkan banyak keuntungan seperti performa lebih baik, SEO lebih mantap, dan keamanan lebih terjamin. Kemudian, ketika kamu menemukan bagian yang mutlak butuh interaksi pengguna atau fitur browser, barulah kamu tambahkan 'use client' di komponen tersebut.

Anggap aja kita lagi ngebangun rumah. Pondasi, dinding, atap itu Server Component. Mereka kokoh, statis, dan penting buat struktur. Nah, saklar lampu, keran air, atau pintu yang bisa dibuka tutup itu baru Client Component. Kita nggak butuh semua dinding jadi interaktif kan Cuma bagian yang perlu aja.

  • Butuh useState atau useEffect atau onClick: Pasti Client Component.
  • Butuh akses window atau localStorage: Pasti Client Component.
  • Fetches data dari database internal atau filesystem: Server Component.
  • Menampilkan data yang statis atau jarang berubah: Server Component.
  • Butuh keamanan ekstra untuk data atau logika: Server Component.

Mencampuradukkan Keduanya The Power of Hybrid

Yang paling asik dari Next js App Router adalah kamu bisa mencampur Server Component dan Client Component dengan sangat fleksibel. Ini yang bikin powerful. Kamu bisa punya halaman utama sebagai Server Component yang fetching data dan merender layout dasarnya, kemudian di dalamnya ada Client Component kecil kecil yang memberikan interaktivitas.

Bagaimana Server Component Merender Client Component

Server Component bisa merender Client Component sebagai children atau bagian dari JSX-nya. Ketika Server Component dirender di server, ia akan menemukan referensi ke Client Component dan menyertakannya dalam payload yang dikirim ke browser. Browser kemudian akan mengambil JavaScript untuk Client Component tersebut dan melakukan hydration.

jsx
// app/blog/page.js (Server Component)
import BlogPosts from './BlogPosts'; // Ini asumsi Server Component
import LikeButton from '../components/LikeButton'; // Ini asumsi Client Componentexport default async function BlogPage() {
  // ... fetching posts
  return (
    
       {/ Server Component /}
      Suka artikel ini?
       {/ Client Component /}
    
  );
}

Dalam contoh ini, BlogPosts mungkin Server Component yang menampilkan daftar postingan, dan LikeButton adalah Client Component yang punya state dan onClick untuk menghitung likes. Server Component di sini cuma "memanggil" Client Component, bukan mengeksekusinya. JavaScript dari LikeButton baru akan didownload dan dieksekusi di browser.

Batasan Penting

  • Client Component tidak bisa mengimport Server Component. Ini penting banget. Client Component hanya bisa menerima "children" atau props dari Server Component, tapi tidak bisa mengimport dan merender Server Component secara langsung. Kenapa Karena Client Component berjalan di browser, dia tidak punya kemampuan untuk merender Server Component yang butuh environment server.
  • Data dari Server ke Client: Data bisa di passing dari Server Component ke Client Component melalui props. Tapi ingat, props ini harus bisa di-serialize (misalnya string, number, object sederhana, array). Fungsi atau class tidak bisa langsung di passing sebagai props dari Server Component ke Client Component.

Tips Praktis Anti Pusing

Kita sudah bahas teorinya sekarang waktunya tips praktis biar nggak pusing saat implementasi.

Mulai dari Server Component

Selalu jadikan Server Component sebagai default kamu. Ini adalah pendekatan yang direkomendasikan oleh tim Next js. Kamu akan mendapatkan manfaat performa secara otomatis. Baru setelah kamu menemui kebutuhan interaksi spesifik yang butuh useState atau useEffect, kamu ubah komponen itu menjadi Client Component dengan 'use client'.

Co-locate Komponen

Usahakan meletakkan Server Component dan Client Component yang saling terkait dalam satu folder yang sama. Misalnya, di folder app/dashboard, kamu bisa punya page.js (Server Component) dan di dalamnya ada folder components yang berisi Chart.js (Client Component) dan DataTable.js (Server Component). Ini bikin struktur proyek lebih rapi dan mudah dimengerti.

Pahami Hydration

Ingat proses hydration ini. Ketika Client Component dirender pertama kali di browser, mereka "dihidupkan" oleh JavaScript. Ini adalah momen penting di mana aplikasi menjadi interaktif. Pastikan hydration ini berjalan lancar agar tidak ada flickering atau layout shift yang mengganggu pengalaman pengguna.

Optimalkan Data Fetching

Dengan Server Component, kamu bisa fetching data lebih dekat ke sumbernya. Manfaatkan ini untuk mengurangi latency dan mempercepat load data. Pertimbangkan juga caching data di server jika data yang diambil sering sama untuk banyak user.

Jangan Kirim JavaScript Berlebihan

Tujuan utama Server Component adalah mengurangi JavaScript yang harus dikirim ke client. Jadi, hindari membuat seluruh aplikasi menjadi Client Component hanya karena satu tombol interaktif kecil. Identifikasi bagian mana yang benar benar butuh interaktivitas dan isolasi kode Client Component di sana.

Kesimpulan

Memahami Server Component dan Client Component memang butuh sedikit penyesuaian dari cara berpikir lama kita tentang React. Tapi percayalah ini investasi waktu yang sangat berharga. Dengan memahami kapan dan bagaimana menggunakan keduanya, kamu bisa membangun aplikasi web yang jauh lebih cepat, lebih efisien, lebih aman, dan punya SEO yang lebih baik.

Jadi, sekarang kalau ada yang tanya "Bingung Server vs Client Component" kamu sudah bisa jawab dengan PD kan Intinya ingat aja Server Component itu buat konten yang statis dan fetching data di server, sementara Client Component itu buat interaksi dinamis di browser. Mereka berdua bekerja sama membangun aplikasi web modern yang asik dan powerful. Jangan ragu buat eksplorasi dan coba coba sendiri ya Karena dengan mencoba, kamu akan makin paham dan jago. Happy coding.