Mengenal Server Component Pada NextJS

Next.js versi 13 membawa sejumlah fitur baru dan peningkatan yang signifikan dalam pengembangan aplikasi web. Fitur-fitur ini membantu meningkatkan kinerja, kecepatan pengembangan, dan kemudahan penggunaan, menjadikannya salah satu pilihan utama bagi pengembang untuk membangun aplikasi web yang canggih dan responsif.

Mengenal Server Component Pada NextJS

Server Component adalah salah satu fitur utama yang diperkenalkan dalam Next.js versi 13. Fitur ini memungkinkan pengembang untuk membagi logika dan tampilan aplikasi web menjadi komponen-komponen yang dikelola oleh server. Dengan menggunakan Server Component, pengembang dapat memisahkan logika server dari logika klien (client) dan mengirimkan hanya data yang diperlukan ke klien, mengurangi beban dan mempercepat waktu respons aplikasi.

Client Component

Secara sederhana Client Component adalah komponen yang dirender di sisi klien. Sebelum menggunakan React 18 semua komponen yang ada dirender dari sisi klien. Sedangkan pada NextJS untuk menggunakan klien komponen kamu hanya perlu menuliskan “use client” di bagian paling atas kode yang kamu buat.

'use client';

import { useState } from 'react';
 
export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Server Component

Server Component merupakan hal baru yang baru digunakan pada React versi 18 dan diterapkan juga pada NextJS versi 13. Server Component memberikan kemampuan untuk merender sebuah komponen di sisi server dan hanya memberikan file JavaScript yang hanya diperlukan oleh pengguna.

Server Component pada Next.js bekerja dengan cara mengizinkan komponen-komponen tertentu untuk dijalankan di sisi server saat permintaan pertama kali datang. Komponen-komponen ini akan dikelola oleh server dan menghasilkan output HTML yang siap ditampilkan kepada pengguna. Setelah itu, komponen-komponen tersebut dapat diubah menjadi komponen klien yang interaktif dan dikelola oleh browser.

Kapan harus menggunakan Client Component dan Server Component?

Walaupun kamu dapat menggunakan Client Component dan Server Component secara bersamaan namun terdapat beberapa aturan yang berlaku seperti kamu tidak bisa mengimport sebuah server component ke dalam sebuah client component seperti di bawah ini.

'use client';

import MyServerComponent from './MyServerComponent';

export default function ClientComponent() {
  return (
    <>
      <MyServerComponent />
    </>
  );
}

Sebagai gantinya kamu dapat membuat server component sebagai props dari sebuah client component.

import ClientComponent from "./ClientComponent";
import ServerComponent from "./ServerComponent";

export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  );
}

Tentu penggunaan Client Component dan Server Component bergantung pada kebutuhan dari sebuah projek yang kamu buat. Berikut adalah panduan yang bisa kamu gunakan untuk memilih kapan harus menggunakan Client Component dan Server Component?

Client Component:

• Kamu butuh untuk menggunakan React Hooks seperti useEffect, useState, useReducer, dan sebagainya.
• Adanya interaktifitas terhadap komponen dengan menggunakan listener seperti onClick().
• Cocok untuk digunakan apabila terdapat interaksi yang secara real time dan tanpa ketergantungan pada server.

Server Component

• Jika kamu mengambil data melalui API
• Jika kamu perlu menyimpan sebuah data yang bersifat sensitif seperti token, kunci API, dan lain-lain.
• Pada komponen tersebut perlu melakukan pengolahan data yang cukup kompleks dan melibatkan server dan apabila komponen tersebut membutuhkan data yang perlu mengakses bagian database secara langsung.

Kesimpulan

Pemilihan antara Client Component dan Server Component tergantung pada kebutuhan spesifik dan skenario pengembangan aplikasi web. Client Component cocok digunakan ketika komponen hanya memerlukan akses ke data klien dan untuk membangun komponen interaktif di sisi klien. Sementara itu, Server Component digunakan ketika komponen memerlukan akses ke data yang hanya tersedia di sisi server, untuk mengolah data yang kompleks, dan mempercepat waktu render pertama kali. Jika kamu ingin lebih mempelajari tentang NextJS kamu bisa mengikuti kelas NextJS Basic atau Membuat Website Voucher Game dengan terintegrasi API VocaGame melalui website buildwithangga.com.