Perbedaan CSR dan SSR di NextJs

IQBAL FARHAN SYUHADA

04 Oct 2024

Dalam pengembangan aplikasi web menggunakan framework seperti Next.js, istilah CSR (Client-Side Rendering) dan SSR (Server-Side Rendering) sering digunakan untuk menjelaskan bagaimana halaman web dirender dan bagaimana data diambil serta ditampilkan. Keduanya memiliki pendekatan yang berbeda untuk rendering halaman, dan berikut penjelasan serta perbedaannya:

1. Client-Side Rendering (CSR)

CSR adalah proses rendering halaman web yang terjadi sepenuhnya di sisi client (browser). Pada awalnya, server hanya mengirimkan skeleton HTML dasar ke browser, lalu JavaScript berjalan di browser untuk mengambil data (biasanya melalui API) dan merender tampilan secara dinamis.

Alur CSR:

1. Request halaman: Ketika browser mengirimkan request ke server, server hanya mengirimkan file HTML yang minim (hanya skeleton), biasanya hanya ada div kosong dan script JavaScript.
2. Loading di client: Setelah file HTML dan JavaScript diterima, JavaScript dijalankan di browser untuk mengambil data dari API menggunakan fetch() atau alat serupa.
3. Rendering di browser: Setelah data diterima, JavaScript yang berjalan di browser akan merender konten dinamis secara langsung.

Kelebihan CSR:

• Interaksi dan pengalaman pengguna (UX) biasanya lebih responsif setelah JavaScript ter-load.
• Halaman web bisa lebih interaktif dan dinamis karena browser mengontrol penuh apa yang ditampilkan.
• Beban server lebih ringan karena server tidak perlu merender halaman secara lengkap di setiap request.

Kekurangan CSR:

• SEO lebih sulit: Mesin pencari mungkin tidak bisa mengindeks konten yang dirender oleh JavaScript (meskipun ini semakin membaik).
• Waktu load awal lebih lama: Karena JavaScript harus di-download dan dijalankan terlebih dahulu, konten dinamis akan ditampilkan setelah proses tersebut selesai, sehingga pengguna melihat layar kosong (loading) sebelum konten muncul.

Contoh CSR:

React secara default menggunakan CSR. Semua komponen dirender di client setelah data diambil dari API.

// CSR Example in React
function UserPage() {
  const [users, setUsers] = React.useState([]);

  React.useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

2. Server-Side Rendering (SSR)

SSR adalah proses rendering di mana HTML lengkap beserta konten dinamis dirender di server terlebih dahulu, lalu dikirim ke browser. Dengan SSR, ketika browser meminta halaman web, server mengambil data yang dibutuhkan, merender HTML lengkap di server, dan kemudian mengirimkan HTML tersebut ke browser.

Alur SSR:

1. Request halaman: Browser mengirimkan request ke server.
2. Rendering di server: Server menunggu semua data diambil dan memproses HTML lengkap di server. Hasilnya adalah HTML yang sudah terisi konten yang relevan.
3. Kirim ke client: HTML yang sudah dirender sepenuhnya di server dikirimkan ke browser, dan konten langsung terlihat.
4. Hydration di client: JavaScript akan di-load di client untuk membuat halaman interaktif. Proses ini dikenal sebagai "hydration", di mana browser mengambil alih halaman yang telah dirender oleh server.

Kelebihan SSR:

• SEO yang lebih baik: Karena HTML lengkap sudah dirender di server, mesin pencari dapat langsung mengindeks halaman tanpa menunggu JavaScript dijalankan.
• Waktu to-first-paint lebih cepat: Pengguna bisa melihat konten lebih cepat karena HTML sudah berisi konten yang lengkap sebelum JavaScript dijalankan.

Kekurangan SSR:

• Beban server lebih tinggi: Server harus merender setiap halaman pada setiap request, yang bisa menyebabkan overhead jika ada banyak request.
• Waktu respons lebih lama: Jika ada banyak data yang harus diambil sebelum merender, halaman mungkin membutuhkan waktu lebih lama untuk dikirimkan ke browser.

Contoh SSR:

Next.js secara default mendukung SSR, di mana halaman dapat dirender di server dan dikirim ke client.

// SSR Example in Next.js
export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await res.json();

  return {
    props: {
      users,
    },
  };
}

const UserPage = ({ users }) => {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserPage;

Dalam contoh SSR di atas, data user diambil di server saat request diterima dan halaman dikirimkan ke client dengan data yang sudah terisi.

Perbedaan Utama CSR dan SSR

Kapan Menggunakan CSR atau SSR?

• CSR lebih cocok untuk aplikasi yang sangat interaktif dan tidak terlalu bergantung pada SEO, seperti dashboard admin atau aplikasi yang sangat bergantung pada interaksi pengguna setelah halaman dimuat.
• SSR lebih cocok untuk aplikasi yang membutuhkan performa SEO yang baik, waktu rendering yang cepat untuk halaman statis, atau aplikasi dengan data yang sering berubah, seperti blog, e-commerce, atau portal berita.

Dengan memahami perbedaan antara CSR dan SSR, Anda dapat memilih pendekatan yang paling sesuai untuk kebutuhan proyek Anda.