Next.js adalah framework React yang populer karena kemampuannya dalam meningkatkan performa aplikasi dengan fitur seperti Server-Side Rendering (SSR) dan Static Site Generation (SSG). Kedua metode ini sangat berguna untuk mengoptimalkan kecepatan dan pengalaman pengguna. Dalam artikel ini, kita akan membahas apa itu SSR dan SSG, bagaimana cara kerjanya, serta kapan harus menggunakannya.

Apa Itu Server-Side Rendering (SSR)?



Server-Side Rendering (SSR) adalah metode rendering di mana halaman web dibuat di sisi server setiap kali ada permintaan dari pengguna. Ini berarti HTML yang dikirim ke browser sudah lengkap dengan data yang dibutuhkan, sehingga meningkatkan SEO dan mempercepat tampilan awal halaman.

Cara Kerja SSR di Next.js

Di Next.js, SSR dapat diimplementasikan menggunakan fungsi getServerSideProps. Fungsi ini akan dieksekusi pada setiap permintaan (request) yang masuk ke server.

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  
  return {
    props: { data },
  };
}

export default function Page({ data }) {
  return (
    <div>
      <h1>Data dari API:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Pada contoh di atas, setiap kali pengguna mengakses halaman ini, server akan mengambil data dari API lalu mengirimkannya ke klien dalam bentuk HTML yang telah dirender.

Kelebihan dan Kekurangan SSR

Kelebihan:

  • SEO lebih baik karena konten dirender sebelum dikirim ke browser.
  • Data selalu up-to-date karena halaman dirender setiap kali ada permintaan baru.

Kekurangan:

  • Lebih lambat dibandingkan metode lain karena halaman harus dirender setiap kali ada request.
  • Membutuhkan lebih banyak sumber daya server.

Apa Itu Static Site Generation (SSG)?

Static Site Generation (SSG) adalah metode rendering di mana halaman web dibuat saat build time dan disimpan dalam bentuk statis. Ini berarti pengguna mendapatkan halaman yang sudah sepenuhnya dirender tanpa perlu permintaan ke server saat runtime.

Cara Kerja SSG di Next.js

SSG diimplementasikan dengan fungsi getStaticProps, yang dieksekusi saat proses build dan tidak akan dijalankan setiap kali ada permintaan dari pengguna.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  
  return {
    props: { data },
  };
}

export default function Page({ data }) {
  return (
    <div>
      <h1>Data Statis dari API:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Halaman yang dihasilkan oleh kode di atas hanya dibuat sekali saat proses build dan akan digunakan untuk setiap permintaan yang datang.

Kelebihan dan Kekurangan SSG

Kelebihan:

  • Performa sangat cepat karena halaman sudah dirender sebelumnya.
  • Tidak membutuhkan sumber daya server yang besar karena halaman hanya dibuat sekali.
  • Cocok untuk SEO karena konten statis bisa langsung diindeks oleh mesin pencari.

Kekurangan:

  • Data tidak selalu up-to-date, kecuali menggunakan fitur revalidate untuk regenerasi halaman secara berkala.
  • Tidak cocok untuk halaman yang membutuhkan data real-time atau sering berubah.

Kapan Harus Menggunakan SSR atau SSG?

Gunakan SSR Jika:

  • Data harus selalu diperbarui setiap kali pengguna mengakses halaman.
  • Halaman memerlukan personalisasi berdasarkan pengguna.
  • Aplikasi memiliki banyak halaman yang memerlukan data real-time.

Gunakan SSG Jika:

  • Konten tidak sering berubah, seperti halaman blog atau dokumentasi.
  • Performa adalah prioritas utama.
  • Halaman harus tersedia bahkan tanpa server yang selalu aktif.

Kesimpulan

SSR dan SSG adalah dua metode rendering yang sangat berguna di Next.js, masing-masing dengan kelebihan dan kekurangan. Pemilihan antara SSR dan SSG bergantung pada kebutuhan proyek. Jika memerlukan halaman yang selalu diperbarui, SSR adalah pilihan terbaik. Namun, jika ingin performa tinggi dengan halaman yang jarang berubah, SSG lebih disarankan. Dengan memahami kedua teknik ini, pengembang dapat membangun aplikasi Next.js yang optimal dan efisien.