Photo by Lautaro Andreani on Unsplash
Halo semuanya! Bagaimana hari pertama libur panjang kalian? Hari ini saya ingin berbagi dengan kalian konsep dari berbagai mode rendering web: SSG, SSR, CSR, dan ISR. Mereka terlihat mirip tetapi memiliki detail yang berbeda. Sebelum memutuskan mana yang akan digunakan, mari kita lihat pengantarnya di bawah ini!
Static Site Generation (SSG)
SSG, atau pembuatan situs statis (Static Generation), berarti membuat file HTML saat mem-build seluruh proyek. File-file HTML ini sudah berisi data yang diperlukan untuk ditampilkan. Mode rendering ini adalah jenis dari pre-rendering. SSG sangat cocok untuk situs web statis di mana konten tidak berubah, karena semua data diperoleh pada saat build. File-file HTML ini dapat ditempatkan di CDN dan di-cache untuk meningkatkan performa situs web. Selain itu, mengadopsi mode rendering SSG juga bermanfaat untuk SEO.
Server-side Rendering (SSR)
SSR, atau rendering sisi server (Server-side Rendering), berarti bahwa setiap kali browser (sisi klien) mengirim permintaan (request), server membuat file HTML dan mengirimkannya kembali ke browser untuk ditampilkan. Mode rendering ini sangat cocok untuk data yang sering berubah. Namun, karena server membutuhkan waktu untuk membuat file HTML, waktu respons situs web akan lebih lama, dan pengguna akan melihat layar putih saat menunggu. SSR juga dianggap sebagai jenis pre-rendering, jadi cukup ramah untuk SEO~ Tetapi perlu dicatat bahwa metode ini mengharuskan server untuk terus memproses permintaan pengguna.
Client-side Rendering (CSR)
CSR, atau rendering sisi klien (Client-side Rendering), berarti seperti namanya. File HTML yang dikirim oleh server ke browser dapat dianggap tanpa konten. Browser hanya dapat merender di layar setelah mengambil data dari server. Mode rendering yang digunakan oleh SPA (Single Page Application seperti React atau Vue) adalah CSR. Keuntungan terbesar dari mode ini adalah tidak perlu mengambil file dari server lagi saat berpindah halaman, sehingga pengguna tidak akan melihat layar putih, yang dianggap sebagai pengalaman pengguna yang sangat baik. Namun, waktu rendering akan bergantung pada lingkungan klien, dan karena hal ini, beban pada server berkurang cukup banyak.
Incremental Static Regeneration (ISR)
ISR, atau regenerasi statis inkremental (Incremental Static Regeneration), adalah mode rendering yang kurang umum terdengar, dan juga dianggap sebagai jenis pre-rendering. ISR membuat semua (atau sebagian) file HTML saat mem-build proyek. Ketika ada permintaan baru dan waktu yang ditentukan telah berlalu, server pertama-tama akan memberikan file lama ke browser sambil membuat ulang file terbaru di latar belakang, dan kemudian mengirimkannya ke browser untuk ditampilkan setelah pembuatan selesai. Jika pengguna pergi ke halaman yang belum di-generate (dibuat), server akan membuat file tersebut saat itu juga dan melakukan cache, sehingga pengguna berikutnya ke halaman ini bisa langsung mendapatkan file dari cache. ISR sangat mirip dengan SSG, tetapi memecahkan masalah bahwa SSG tidak dapat memperbarui konten data, dan file HTML juga akan di-cache di CDN, sehingga juga mengurangi beban pada server dibandingkan dengan SSR.
Mana yang harus Anda gunakan?
Setiap mode rendering memiliki pro dan kontra, dan mana yang harus dipilih tergantung pada proyek kita. Tidak ada pemenang yang jelas.
- Dashboard sistem internal di mana data berubah terus-menerus dan SEO tidak diperlukan sangat cocok untuk menggunakan CSR.
- Jika tingkat perubahan data tidak rendah tetapi SEO diperlukan, Anda dapat mempertimbangkan menggunakan SSR.
- Jika data jarang perlu diperbarui seperti situs acara atau pemasaran, dan SEO juga penting, menggunakan SSG sangat cocok.
- Jika data tidak perlu banyak diperbarui atau ada terlalu banyak halaman dan SEO diperlukan, seperti halaman produk, maka ISR adalah pilihan yang baik.
Saya juga menggambar tabel (dalam bahasa Inggris XD), coba lihat~
Pre-render di Next.js
Next.js memiliki dukungan bawaan untuk mode rendering yang disebutkan di atas, dan juga secara default menggunakan SSG untuk merender halaman web yang tidak perlu mengambil data (fetch). Jika Anda perlu mengambil data dari server, itu akan dicampur dengan CSR (hybrid). Jika Anda ingin menggunakan mode rendering lain, Anda dapat menggunakan fungsi berikut yang disediakan oleh Next.js:
| Function | Description |
|---|---|
| getStaticProps (Static Generation) | Mengambil data yang diperlukan pada saat build dan memasukkannya ke dalam file HTML |
| getStaticPaths (Static Generation) | Memutuskan rute dinamis (dynamic) mana yang perlu dibuat sebagai file HTML pada saat build |
| getServerSideProps (Server-side Rendering) | Sebuah fungsi yang berjalan setiap kali browser mengirim permintaan untuk mengambil data yang diperlukan |
Kesimpulan
Sekian dulu untuk hari ini, mari kita lanjutkan besok~ Besok saya akan berbagi dengan kalian bagaimana menggunakan ketiga fungsi tersebut untuk mengimplementasikan situs web dengan mode rendering yang berbeda! Apa pendapat kalian tentang mode rendering yang dipelajari hari ini?