Next.js SSR: Bikin Website Ngebut dan SEO Friendly? Gampang Kok!

Halo, saya Zona Sosmed, expert di bidang pengembangan web modern. Kali ini, kita bakal bahas tentang Next.js SSR, atau Server-Side Rendering. Kedengarannya rumit? Tenang, saya akan jelaskan dengan bahasa yang mudah dimengerti.

Apa Sih SSR Itu? Kenapa Penting?

Bayangkan begini: Biasanya, website React itu "Client-Side Rendered" (CSR). Artinya, browser kamu yang kerja keras merakit halaman web dari kode JavaScript. Nah, SSR itu beda. Server yang ngerjain duluan! Server "memasak" HTML lengkap, lalu mengirimkannya ke browser. Browser tinggal nampilin aja, gak perlu mikir keras.

Kenapa ini penting? Dua alasan utama:

• SEO Lebih Baik: Google (dan mesin pencari lain) lebih suka website yang HTML-nya udah lengkap. Bot Google jadi lebih mudah memahami isi website kamu. Ini penting banget buat ranking di hasil pencarian!
• Performa Lebih Cepat: Pengguna langsung lihat konten, gak perlu nunggu JavaScript selesai diunduh dan dieksekusi. Ini bikin pengalaman pengguna jadi jauh lebih baik. Kecepatan adalah fitur, kata orang bijak.

Next.js: Sahabat Terbaik SSR untuk React

Next.js adalah framework React yang memudahkan kita menerapkan SSR. Gak perlu konfigurasi rumit, udah disediain semua. Cukup beberapa baris kode, website kamu udah bisa SSR.

Gimana Caranya?

Next.js punya beberapa cara untuk melakukan SSR:

• getServerSideProps: Dipakai kalau data yang mau ditampilkan di halaman itu berubah setiap kali halaman diakses. Misalnya, halaman profil pengguna yang datanya diambil dari database.
• getStaticProps: Dipakai kalau data yang mau ditampilkan itu statis, atau jarang berubah. Misalnya, halaman blog yang kontennya gak diupdate setiap detik. Ini lebih cepat dari getServerSideProps karena halaman HTML-nya bisa di-cache.
• getStaticPaths: Dipakai barengan sama getStaticProps untuk membuat halaman dinamis berdasarkan data yang ada. Misalnya, halaman detail produk yang URL-nya beda-beda tergantung ID produk.

Contoh Kode Sederhana

// pages/index.js
function HomePage(props) {
  return (
    <div>
      <h1>Daftar Pengguna</h1>
      <ul>
        {props.users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getServerSideProps(context) {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const users = await res.json();

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

export default HomePage;

Kode di atas adalah contoh sederhana menampilkan daftar pengguna yang diambil dari API. Fungsi getServerSideProps akan dijalankan di server setiap kali halaman diakses, lalu datanya dikirim ke komponen HomePage.

Kesimpulan

Next.js SSR adalah solusi tepat buat kamu yang pengen website React-nya ngebut dan SEO friendly. Gak perlu pusing konfigurasi, semua udah disediain. Dengan SSR, website kamu jadi lebih mudah ditemukan di Google dan memberikan pengalaman pengguna yang lebih baik. Yuk, mulai coba sekarang!

Menurut data dari Google, website yang loadingnya lebih dari 3 detik berpotensi kehilangan 53% pengunjung. Jadi, optimasi kecepatan website itu penting banget!