Tutorial Next JS 15 Belajar Server dan Client Components Projek Web Booking Hotel

Kalau kamu baru mau mulai belajar bikin website modern, Next.js 15 adalah salah satu framework yang wajib kamu lirik. Framework ini dibangun di atas React, tapi punya banyak fitur tambahan yang bikin proses bikin web jadi lebih simpel, lebih cepat, dan hasilnya juga lebih SEO-friendly. Jadi kalau kamu pengen bantuin bisnis online biar lebih mudah ditemukan di Google, atau pengen klien kamu puas karena websitenya performanya mantap, Next.js bisa jadi solusi yang tepat.

Yang bikin Next.js 15 makin menarik adalah kemampuannya dalam urusan SEO dan performa. Kita tahu, dua hal ini penting banget buat bisnis online. SEO itu ngaruh ke berapa banyak orang bisa nemuin website kamu lewat pencarian, sementara performa itu ngaruh ke apakah orang betah atau nggak buka websitenya. Next.js 15 hadir buat meanjawab dua masalah itu secara elegan, karena dia bisa bantu kamu ngerender halaman langsung dari server (yang lebih cepet diakses dan dibaca mesin pencari), tapi juga bisa fleksibel saat kamu butuh interaksi dinamis dari sisi pengguna.

Kenapa Harus Paham Perbedaan Server dan Client Component?

Nah, kalau kamu baru banget mulai, mungkin istilah server component dan client component masih terdengar asing. Tapi percaya deh, ini salah satu hal paling penting yang harus kamu kuasai dulu sebelum ngoding lebih jauh di Next.js 15.

Singkatnya, komponen server itu dijalankan di server, artinya data bisa diolah duluan sebelum dikirim ke browser. Hasilnya? Website kamu bisa tampil lebih cepat dan langsung ramah SEO karena kontennya udah siap ketika user mengakses. Sedangkan client component dijalankan di browser, cocok buat fitur-fitur interaktif yang butuh respon langsung dari user, seperti klik tombol, buka modal, atau update state.

Kalau kamu asal pakai semuanya di client padahal bisa di-handle server, efeknya bisa bikin web kamu jadi lambat dan susah terbaca mesin pencari. Sebaliknya, kalau kamu maksa semua di server tapi butuh interaksi, hasilnya juga bisa nge-lag dan nggak responsif. Makanya penting banget untuk tahu kapan pakai yang mana.

Kita Akan Belajar Perlahan, Jangan Takut Duluan

Tenang aja, artikel ini dibuat buat kamu yang baru mulai banget. Kita bakal bahas perlahan, dari konsep dasarnya dulu, biar kamu nggak bingung. Kita akan pelan-pelan bongkar gimana cara kerja server dan client components di Next.js 15, kenapa ini penting banget buat performa dan SEO, dan kapan waktu terbaik buat pakai masing-masing.

Tujuannya adalah supaya kamu punya pondasi yang kuat dulu. Karena kalau fondasi kamu udah paham, ke depannya mau bikin website e-commerce, portfolio, company profile, sampai SaaS platform, semua bakal lebih mudah. Artikel ini bukan cuma ngajarin ngoding doang, tapi juga ngajak kamu mikir sebagai developer yang ngerti kenapa harus begini, bukan cuma ikut-ikutan tutorial aja.

Lanjut yuk ke bagian berikutnya, di mana kita mulai bahas bagaimana cara membedakan dan menggunakan server component dan client component dengan lebih praktis.

Apa Itu Server Component di Next.js 15?

Kalau kamu baru kenal Next.js 15, kamu pasti sering dengar istilah server component. Tapi sebenarnya, apa sih server component itu?

Server component adalah komponen React yang dijalankan di server, bukan di browser user. Jadi, ketika user membuka halaman website kamu, server-lah yang lebih dulu menjalankan logika dan menghasilkan tampilan HTML-nya. Setelah hasil HTML itu siap, baru dikirim ke browser. Dengan cara ini, user langsung melihat halaman yang sudah siap tampil, tanpa perlu nunggu proses JavaScript di browser.

Berbeda dengan client component yang perlu waktu tambahan untuk diload dan dijalankan di browser (karena harus menunggu JavaScript siap), server component itu ibaratnya udah nyiapin semua makanan sebelum diantar ke meja kamu. Kamu tinggal duduk, dan makanan langsung tersedia. Nggak perlu nunggu dimasak lagi di depan kamu.

Next.js 15 mempermudah proses ini dengan pembagian otomatis mana komponen yang berjalan di server dan mana yang butuh interaksi dan harus berjalan di sisi klien (browser). Jadi kita sebagai developer bisa fokus membangun pengalaman pengguna yang cepat, nyaman, dan tetap SEO-friendly.

Manfaat Utama dari Server Component

Ngomongin soal manfaatnya, server component itu bisa dibilang “raja” dalam urusan kecepatan dan SEO. Kenapa? Karena dia bekerja secara efisien dari sisi server dan menghindari kerja ekstra di browser user. Berikut beberapa manfaat paling terasa:

  • SEO Lebih Optimal Konten halaman sudah siap saat dikirim ke browser, jadi mesin pencari seperti Google bisa langsung membaca dan mengindeks kontennya dengan mudah. Cocok banget buat halaman yang butuh tampil di hasil pencarian, seperti halaman detail hotel, promo kamar, atau artikel blog.
  • Waktu Loading Lebih Cepat Karena data langsung diproses dari server, user nggak perlu nunggu JavaScript di browser selesai dijalankan dulu. Halaman bisa tampil hampir seketika.
  • Bundle Size Lebih Kecil Komponen yang dijalankan di server nggak perlu dikirim ke browser dalam bentuk JavaScript. Artinya, ukuran file yang perlu didownload user jadi lebih kecil. Ini bikin website kamu lebih ringan dan hemat kuota.
  • Keamanan Lebih Baik Proses data penting atau sensitif seperti akses database, autentikasi, atau validasi bisa tetap dilakukan aman di sisi server. User nggak akan bisa ngintip atau manipulasi proses ini dari browser.
  • Arsitektur Lebih Rapi Kamu bisa pisahkan dengan jelas mana komponen yang hanya bertugas menampilkan data, dan mana yang bertugas menerima input dari user. Ini bikin struktur kode kamu lebih mudah dipelihara.

Analogi Simpel Supaya Lebih Paham

Bayangin kamu lagi pengen booking hotel buat liburan ke Bali. Kamu punya dua pilihan cara untuk cari hotel:

  • Cara pertama (Server Component): Kamu buka aplikasi travel dan langsung dapet halaman yang udah lengkap isinya — daftar hotel, harga per malam, fasilitas, dan ulasan pelanggan. Semua sudah ditata rapi dan langsung muncul begitu kamu buka. Enak kan?
  • Cara kedua (Client Component): Kamu buka aplikasinya, tapi halaman awal kosong. Lalu perlahan-lahan isinya mulai muncul satu-satu — loading harga, loading nama hotel, loading gambar. Kamu nunggu semuanya siap sambil bengong. Nggak enak, apalagi kalau internet lemot.

Nah, Next.js 15 dengan server component ngasih kamu pengalaman seperti cara pertama. Data hotelnya udah disiapkan dari awal. Pengguna tinggal lihat dan pilih.

Contoh Koding Lengkap Halaman Hotel

Sekarang kita lihat contoh real-nya di project Next.js 15. Bayangin kamu bikin halaman daftar hotel di file app/hotels/page.tsx. Komponen ini akan di-render di server dan siap tampil dengan cepat.

// app/hotels/page.tsx

import { getAllHotels } from '@/lib/hotel.api';
import Image from 'next/image';

export default async function HotelListPage() {
  const hotels = await getAllHotels(); // Fetch data langsung di server

  return (
    <div className="max-w-5xl mx-auto py-12">
      <h1 className="text-3xl font-bold mb-6">Temukan Hotel Terbaik untuk Liburanmu</h1>
      <p className="text-gray-600 mb-10">Berbagai pilihan hotel dengan fasilitas terbaik, lokasi strategis, dan harga yang bersahabat.</p>

      <div className="grid grid-cols-2 gap-6">
        {hotels.map((hotel) => (
          <div key={hotel.id} className="border rounded-xl p-4 shadow bg-white">
            <Image
              src={hotel.image}
              alt={hotel.name}
              width={400}
              height={250}
              className="rounded-lg"
            />
            <h2 className="text-xl font-semibold mt-4">{hotel.name}</h2>
            <p className="text-sm text-gray-600">{hotel.location}</p>
            <p className="mt-2 text-green-600 font-bold">
              Rp {hotel.pricePerNight.toLocaleString('id-ID')} / malam
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}

Apa yang Terjadi di Koding Ini?

  • Fungsi getAllHotels() akan ambil data dari database atau API, dan ini dilakukan langsung di server.
  • Karena kita pakai async function, kita bisa langsung pakai await di dalam komponen. Ini fitur eksklusif buat server component.
  • Hasil HTML dari komponen ini akan langsung dikirim ke browser, jadi user nggak nungguin data dimuat lewat JavaScript.
  • Komponen ini nggak punya interaksi dinamis (kayak klik tombol atau input), jadi cocok dijalankan dari server.

Dengan pendekatan ini, halaman daftar hotel kamu jadi lebih cepat terbuka, lebih SEO-friendly, dan lebih efisien untuk user. Cocok banget buat weeb booking hotel yang butuh kecepatan dan kepercayaan.

Setelah paham server component, di bagian selanjutnya kita bakal bahas client component, bagian yang berperan besar dalam membuat halaman hotel jadi lebih interaktif dan user bisa berkomunikasi dengan aplikasi secara langsung.

Apa Itu Client Component di Next.js 15?

Setelah kamu kenalan dengan server component, sekarang saatnya kita bahas client component — pasangan penting dalam pengembangan aplikasi Next.js 15.

Kalau server component dijalankan di server dan menghasilkan HTML siap tampil, client component adalah komponen yang dijalankan di browser user. Artinya, semua logika, state (data sementara), event handler seperti onClick, onChange, sampai interaksi real-time — semuanya terjadi di sisi klien (client-side).

Dalam proyek website booking hotel, client component cocok banget digunakan untuk bagian interaktif, misalnya:

  • Formulir pencarian hotel berdasarkan lokasi dan tanggal
  • Tombol “Lihat Detail” atau “Booking Sekarang”
  • Fitur filter berdasarkan harga, rating, atau fasilitas
  • Modal popup yang muncul saat user klik sesuatu
  • Dropdown pemilihan jumlah tamu atau kamar

Pokoknya, kalau kamu butuh interaksi dari user dan ingin websitenya terasa “hidup”, kamu bakal pakai client component.

Manfaat Utama Client Component

  • Bisa Tangani Interaksi Langsung dari User Client component memungkinkan kamu menambahkan event seperti klik tombol, input teks, validasi form, dan sebagainya. Hal-hal seperti ini nggak bisa dilakukan di server component.
  • Penggunaan State yang Fleksibel Kamu bisa pakai state (misalnya dengan useState) untuk menyimpan data sementara, seperti isian form atau status toggle.
  • Pengalaman Pengguna Lebih Interaktif Misalnya ketika user klik tombol untuk membuka popup, mengganti tanggal booking, atau melihat harga terbaru, kamu bisa langsung merespon tanpa reload halaman.
  • Cocok untuk Komponen UI Kompleks Kalau kamu bikin komponen seperti carousel gambar, kalender booking, atau sidebar filter dinamis, semuanya butuh client component agar bisa jalan.

Analogi Simpel Supaya Makin Paham

Bayangin kamu lagi di hotel dan pengen pesan makanan dari kamar. Kalau kamu cuma nerima brosur (kayak server component), kamu tahu daftar makanannya, tapi kamu tetap harus kontak resepsionis buat order.

Nah, kalau client component, itu seperti kamu dikasih tablet di kamar yang bisa langsung kamu pencet-pencet buat order, bayar, dan atur pengiriman ke kamar. Semua bisa kamu lakukan langsung dari situ — interaktif dan instan.

Client component itu penting banget untuk interaksi seperti itu. Jadi kombinasi antara brosur (server component) dan tablet interaktif (client component) itulah yang bikin pengalaman pengguna jadi komplit.

Contoh Koding Client Component di Next.js 15

Sekarang kita bikin contoh client component di halaman booking hotel, misalnya komponen pencarian hotel berdasarkan nama kota yang bisa langsung merespon input user.

'use client';

import { useState } from 'react';

export default function HotelSearchForm() {
  const [city, setCity] = useState('');
  const [results, setResults] = useState([]);

  const handleSearch = async () => {
    const res = await fetch(`/api/search-hotels?city=${city}`);
    const data = await res.json();
    setResults(data.hotels);
  };

  return (
    <div className="p-6 bg-white rounded-xl shadow-md max-w-xl mx-auto">
      <h2 className="text-xl font-semibold mb-4">Cari Hotel Berdasarkan Kota</h2>
      <input
        type="text"
        value={city}
        onChange={(e) => setCity(e.target.value)}
        placeholder="Contoh: Bandung"
        className="w-full border px-4 py-2 rounded-md mb-4"
      />
      <button
        onClick={handleSearch}
        className="bg-blue-600 text-white px-6 py-2 rounded-md"
      >
        Cari Hotel
      </button>

      {results.length > 0 && (
        <div className="mt-6">
          <h3 className="text-lg font-medium mb-2">Hasil Pencarian:</h3>
          <ul className="space-y-2">
            {results.map((hotel: any) => (
              <li
                key={hotel.id}
                className="border rounded-md p-3 hover:bg-gray-50 transition"
              >
                <p className="font-bold">{hotel.name}</p>
                <p className="text-sm text-gray-600">{hotel.location}</p>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

Apa yang Terjadi di Komponen Ini?

  • Baris ‘use client’; di paling atas wajib ditulis. Ini memberi tahu Next.js bahwa komponen ini harus dijalankan di sisi browser.
  • Kita pakai useState untuk menyimpan input kota dan hasil pencarian.
  • Saat user mengetik nama kota, datanya langsung disimpan tanpa reload halaman.
  • Ketika tombol “Cari Hotel” ditekan, kita fetch data dari API, dan tampilkan hasilnya langsung di bawahnya.
  • Semua ini hanya bisa dilakukan di client component, karena bergantung pada interaksi user secara langsung dan state yang berubah-ubah.

Kapan Harus Pakai Client Component?

Pakai client component kalau kamu butuh:

  • Interaksi langsung (klik, input, validasi)
  • State lokal yang berubah-ubah
  • Komponen dinamis seperti dropdown, toggle, modal
  • Efek animasi atau event pengguna (hover, scroll)

Tapi tetap harus bijak. Jangan semua komponen dijadikan client component, karena itu bisa bikin bundle JavaScript kamu jadi besar dan berat. Pakai client component hanya untuk bagian yang memang butuh.

Dengan menggabungkan server component untuk tampilan awal dan SEO, serta client component untuk interaksi pengguna, kamu bisa bikin web booking hotel yang cepat, canggih, dan tetap enak digunakan.

Di bagian selanjutnya, kita akan lihat bagaimana menggabungkan dua pendekatan ini dalam satu halaman — biar websitemu makin optimal!

Menggabungkan Server dan Client Component dalam Satu Halaman

Setelah paham perbedaan dan fungsi masing-masing, sekarang saatnya kita bahas hal yang paling sering dilakukan di project nyata: menggabungkan server dan client component dalam satu halaman. Ini adalah pendekatan yang sangat umum di Next.js 15 — dan justru inilah kekuatannya.

Bayangin kamu sedang bikin halaman utama untuk web booking hotel. Di bagian atas halaman, kamu ingin menampilkan daftar hotel secara statis berdasarkan data dari server (server component). Tapi di bagian bawahnya, kamu pengin kasih filter interaktif supaya user bisa cari hotel berdasarkan kota, harga, atau tanggal (client component). Nah, kombinasi kayak gini sangat ideal dan bikin pengalaman pengguna jadi lengkap.

Kenapa Harus Digabung?

Karena nggak semua bagian halaman perlu interaksi. Kalau semua kamu jadikan client component, websitenya jadi berat dan lambat. Tapi kalau semua server, user jadi nggak bisa ngapa-ngapain secara langsung. Dengan Next.js 15, kamu bisa dapat yang terbaik dari dua dunia:

  • Server component bikin halaman cepat tampil dan SEO-friendly
  • Client component bikin interaksi lebih hidup dan personal

Contoh Koding Kombinasi Server + Client

Berikut ini contoh struktur file app/hotels/page.tsx yang merupakan server component utama, lalu di dalamnya kita import client component HotelSearchForm.

// app/hotels/page.tsx (SERVER COMPONENT)

import { getAllHotels } from '@/lib/hotel.api';
import HotelSearchForm from '@/components/HotelSearchForm';
import Image from 'next/image';

export default async function HotelListPage() {
  const hotels = await getAllHotels(); // Data diambil dari server

  return (
    <div className="max-w-5xl mx-auto py-12">
      <h1 className="text-3xl font-bold mb-6">Temukan Hotel Terbaik</h1>

      <div className="grid grid-cols-2 gap-6 mb-12">
        {hotels.map((hotel) => (
          <div key={hotel.id} className="border rounded-xl p-4 shadow bg-white">
            <Image
              src={hotel.image}
              alt={hotel.name}
              width={400}
              height={250}
              className="rounded-lg"
            />
            <h2 className="text-xl font-semibold mt-4">{hotel.name}</h2>
            <p className="text-sm text-gray-600">{hotel.location}</p>
            <p className="mt-2 text-green-600 font-bold">
              Rp {hotel.pricePerNight.toLocaleString('id-ID')} / malam
            </p>
          </div>
        ))}
      </div>

      {/* Bagian Interaktif */}
      <HotelSearchForm />
    </div>
  );
}

Dan ini file components/HotelSearchForm.tsx sebagai client component:

// components/HotelSearchForm.tsx (CLIENT COMPONENT)

'use client';

import { useState } from 'react';

export default function HotelSearchForm() {
  const [city, setCity] = useState('');
  const [results, setResults] = useState([]);

  const handleSearch = async () => {
    const res = await fetch(`/api/search-hotels?city=${city}`);
    const data = await res.json();
    setResults(data.hotels);
  };

  return (
    <div className="p-6 bg-white rounded-xl shadow-md">
      <h2 className="text-xl font-semibold mb-4">Cari Hotel Berdasarkan Kota</h2>
      <input
        type="text"
        value={city}
        onChange={(e) => setCity(e.target.value)}
        placeholder="Contoh: Yogyakarta"
        className="w-full border px-4 py-2 rounded-md mb-4"
      />
      <button
        onClick={handleSearch}
        className="bg-blue-600 text-white px-6 py-2 rounded-md"
      >
        Cari Hotel
      </button>

      {results.length > 0 && (
        <ul className="mt-4 space-y-2">
          {results.map((hotel: any) => (
            <li key={hotel.id} className="border p-3 rounded-md shadow-sm">
              <p className="font-bold">{hotel.name}</p>
              <p className="text-sm text-gray-500">{hotel.location}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

Penjelasan Alurnya

  1. HotelListPage adalah server component. Jadi halaman ini bisa langsung render daftar hotel dengan cepat saat user mengakses.
  2. Di dalamnya kita menyisipkan HotelSearchForm, yang merupakan client component. Jadi bagian ini akan berjalan di browser.
  3. User bisa langsung input kota dan lihat hasil pencarian tanpa reload — karena bagian ini dinamis.
  4. Pendekatan ini memberikan first load yang cepat dan tetap mendukung interaktivitas real-time.

Kesimpulan

Menggabungkan server dan client component dalam satu halaman adalah hal yang sangat umum dan powerful di Next.js 15. Ini adalah cara paling optimal untuk membangun website modern: cepat, SEO-friendly, dan tetap interaktif.

Jadi mulai sekarang, saat kamu bikin halaman apapun — entah itu homepage, booking form, atau katalog hotel — pikirkan dulu mana bagian yang bisa disajikan dari server, dan mana bagian yang perlu interaksi dari client. Dengan cara ini, web kamu akan terasa lebih profesional, lebih ringan, dan jauh lebih menyenangkan digunakan oleh pengunjung.

Di artikel berikutnya, kita bisa lanjut bahas gimana caranya optimasi SEO dan performa lebih dalam lagi, sambil tetap mempertahankan user experience terbaik di Next.js 15.

Penutup: Saatnya Naik Level Bareng Mentor Expert

Kalau kamu sudah sampai di bagian akhir artikel ini, artinya kamu serius banget ingin memahami Next.js 15 dengan benar. Dan itu langkah yang keren banget.

Tapi, jujur aja, belajar sendiri kadang bisa bikin frustasi. Banyak fitur baru, banyak istilah asing, kadang kita udah ngoding bener tapi hasilnya nggak sesuai harapan. Di sinilah belajar bareng mentor expert jadi solusi paling efektif.

Bayangin kamu punya seseorang yang udah pernah ngerjain real project dengan Next.js, yang ngerti seluk-beluk client dan server components, yang tahu kesalahan umum pemula, dan bisa bantu kamu debug saat kamu stuck. Belajar jadi lebih cepat, lebih terarah, dan jauh lebih menyenangkan.

Dengan ikut belajar bareng mentor:

  • Kamu bisa dapet feedback langsung dari orang yang lebih berpengalaman
  • Ada komunitas belajar yang bikin kamu tetap semangat dan nggak merasa sendirian
  • Kamu bisa dapet template dan resource premium yang siap pakai
  • Belajar bukan cuma teori, tapi langsung bikin project nyata yang bisa dipakai buat portofolio
  • Dan yang paling penting: kamu bisa tanya apa aja tanpa takut di-judge

Buat kamu yang pengen kerja sebagai frontend developer profesional, atau ingin ngebantu bisnis online dengan performa web yang lebih cepat dan SEO-friendly, belajar bareng mentor itu investasi terbaik yang bisa kamu ambil hari ini.

Yuk, jangan cuma jadi penonton. Saatnya kamu sendiri yang bikin karya hebat. Belajar bareng mentor di BuildWithAngga, dan rasain sendiri bedanya ketika kamu punya support system yang solid. 🚀💻

Sampai ketemu di artikel dan kelas selanjutnya!