Incremental Static Regeneration (ISR) di Next.js: Cara Efektif Mengelola Konten Dinamis

Bayangkan website Next.js Anda memuat halaman secepat kilat, namun tetap menampilkan informasi terbaru tanpa perlu rebuild setiap kali ada perubahan konten. Kedengarannya mustahil? Tidak untuk saat ini! Incremental Static Regeneration (ISR) di Next.js mewujudkan hal ini. Jika Anda mencari cara untuk meningkatkan kecepatan website, mengoptimalkan SEO, dan menyajikan konten dinamis secara efisien, maka Anda berada di tempat yang tepat. Mari kita selami bagaimana ISR merevolusi cara kita membangun website modern dengan Next.js.

Apa Itu Incremental Static Regeneration (ISR)?

Incremental Static Regeneration (ISR) adalah sebuah fitur canggih dalam framework Next.js yang memungkinkan pengembang untuk mendapatkan manfaat terbaik dari Static Site Generation (SSG) sambil tetap mampu menyajikan konten yang dinamis dan sering diperbarui. 

Singkatnya, ISR bekerja dengan cara melakukan pre-rendering halaman website pada saat build time, menghasilkan file HTML statis yang sangat cepat diakses oleh pengguna dan mudah diindeks oleh mesin pencari. 

ISR memungkinkan halaman-halaman statis ini untuk diperbarui (revalidate) di latar belakang pada interval waktu tertentu yang telah ditentukan atau berdasarkan permintaan (on-demand). Ini berarti pengguna akan tetap menerima versi cache (lama) dari halaman dengan sangat cepat pada kunjungan awal, sementara Next.js secara otomatis memperbarui konten di latar belakang. 

Pada kunjungan berikutnya, pengguna akan melihat konten yang sudah diperbarui. Dengan demikian, ISR menjembatani kesenjangan antara kecepatan dan SEO yang unggul dari konten statis dengan kebutuhan akan konten yang selalu dinamis.

Bagaimana ISR Bekerja?

Cara kerja Incremental Static Regeneration (ISR) dimulai saat proses build aplikasi Next.js, di mana halaman-halaman yang dikonfigurasi untuk menggunakan ISR akan di-pre-render menjadi file HTML statis. File-file statis ini kemudian dapat langsung disajikan kepada pengguna dengan sangat cepat melalui CDN, memberikan performa yang optimal dan meningkatkan SEO. 

Perbedaan utama dengan SSG tradisional terletak pada kemampuan untuk memperbarui konten statis ini setelah proses build selesai. Pengembang dapat menentukan interval waktu tertentu (dalam detik) melalui opsi revalidate di dalam fungsi getStaticProps. Setelah interval waktu ini berakhir, ketika ada permintaan baru untuk halaman tersebut, Next.js akan tetap menyajikan versi stale (lama) dari cache secara instan kepada pengguna, sambil secara asinkron melakukan revalidation data di latar belakang. 

Proses revalidation ini akan mengambil data terbaru dari sumber data dan menghasilkan versi statis terbaru dari halaman tersebut. Pada kunjungan berikutnya oleh pengguna, mereka akan menerima versi halaman yang sudah diperbarui. Selain itu, ISR juga mendukung on-demand revalidation, di mana pembaruan konten dapat dipicu berdasarkan suatu peristiwa, seperti pembaruan data melalui webhook, memberikan kontrol yang lebih fleksibel atas kapan konten diperbarui.

Keuntungan Menggunakan Incremental Static Regeneration

Peningkatan Performa

Salah satu keuntungan utama ISR adalah peningkatan performa website secara signifikan. Dengan melakukan pre-rendering halaman menjadi file HTML statis pada saat build time, halaman dapat disajikan kepada pengguna dengan sangat cepat melalui CDN tanpa perlu menunggu server merakit halaman pada setiap permintaan. 

Meskipun konten dapat diperbarui secara berkala, pengguna awal akan selalu menerima versi statis yang sudah dioptimalkan, menghasilkan loading time yang lebih singkat, pengalaman pengguna yang lebih baik, dan skor Core Web Vitals yang lebih tinggi

SEO yang Lebih Baik

Halaman statis secara inheren lebih mudah diindeks oleh mesin pencari seperti Google. Dengan ISR, Anda tetap mendapatkan keuntungan SEO dari konten statis pada kunjungan awal. Mesin pencari dapat dengan cepat merayapi dan memahami struktur serta konten halaman yang sudah di-render sepenuhnya. Meskipun konten dinamis diperbarui di latar belakang, versi statis awal yang kaya konten dan terstruktur dengan baik tetap memberikan fondasi SEO yang kuat bagi halaman Anda.

Waktu Build yang Lebih Cepat

Dibandingkan dengan Server-Side Rendering (SSR) yang harus me-render setiap halaman pada setiap permintaan pengguna, atau bahkan SSG tradisional yang mungkin memerlukan waktu build yang sangat lama untuk website dengan banyak konten dinamis, ISR menawarkan solusi yang lebih efisien. 

Hanya halaman yang perlu di-pre-render yang akan diproses saat build time. Pembaruan konten dinamis terjadi secara inkremental di latar belakang, sehingga Anda tidak perlu membangun ulang seluruh website setiap kali ada perubahan kecil pada data. Hal ini secara signifikan mempercepat waktu build dan deployment.

Fleksibilitas Konten Dinamis

ISR memberikan fleksibilitas yang lebih besar dalam mengelola konten dinamis. Anda tidak lagi terbatas pada pilihan antara konten yang sepenuhnya statis atau sepenuhnya dinamis dengan segala konsekuensinya. Dengan kemampuan untuk mengatur interval revalidation atau memicu pembaruan berdasarkan permintaan, Anda dapat menyajikan konten yang sering berubah (seperti berita terkini atau ketersediaan produk) dengan tetap mempertahankan performa statis untuk sebagian besar waktu. Ini memungkinkan Anda untuk memiliki website yang cepat namun tetap up-to-date.

Pengurangan Beban Server

Dengan sebagian besar konten disajikan sebagai file statis langsung dari CDN, beban pada server aplikasi menjadi jauh lebih ringan. Server tidak perlu bekerja keras untuk me-render halaman pada setiap permintaan pengguna. Beban server yang berkurang ini tidak hanya meningkatkan kinerja aplikasi secara keseluruhan tetapi juga dapat mengurangi biaya operasional dan meningkatkan keandalan sistem.

Implementasi ISR di Next.js

Implementasi Incremental Static Regeneration (ISR) di Next.js melibatkan pemanfaatan fungsi getStaticProps dan opsi revalidate, serta penggunaan res.revalidate() dalam API routes untuk on-demand revalidation. Berikut penjelasannya:

1. Menggunakan getStaticProps dan opsi revalidate

Cara paling umum untuk mengimplementasikan ISR adalah melalui fungsi getStaticProps yang diekspor dari halaman Next.js Anda. Di dalam fungsi ini, Anda melakukan pengambilan data yang dibutuhkan oleh halaman tersebut. Yang membedakan ISR adalah penambahan opsi revalidate pada nilai kembalian dari getStaticProps. Opsi revalidate menerima nilai numerik dalam satuan detik, yang menentukan seberapa sering Next.js akan mencoba untuk memperbarui halaman di latar belakang setelah halaman statis pertama kali di-render.

Dalam contoh di atas, halaman akan di-pre-render saat build time dengan data dari fetchPost. Kemudian, setiap kali ada permintaan ke halaman ini setelah deployment, Next.js akan menyajikan versi statis yang ada di cache secara langsung. Namun, jika sudah lebih dari 60 detik sejak halaman terakhir kali di-render atau di-revalidate, Next.js akan secara asinkron melakukan pengambilan data terbaru di latar belakang. Jika data baru berhasil diambil, Next.js akan memperbarui cache dengan versi halaman yang baru. Pengguna akan melihat konten terbaru pada kunjungan berikutnya setelah proses revalidation selesai. Jika proses revalidation gagal, Next.js akan terus menyajikan versi stale yang terakhir berhasil di-render.

2. Revalidation Berbasis Permintaan (On-Demand Revalidation) dengan res.revalidate():

Selain revalidation berbasis waktu, Next.js juga memungkinkan Anda untuk memicu revalidation halaman secara manual berdasarkan suatu peristiwa, seperti pembaruan data melalui Content Management System (CMS) atau webhook. Ini dicapai dengan menggunakan metode res.revalidate() di dalam API routes Next.js.

Pertama, Anda perlu membuat sebuah API route yang akan menerima permintaan revalidation. Kemudian, di dalam handler API route tersebut, Anda dapat menggunakan res.revalidate(‘/path/to/your/page’) untuk memberitahu Next.js agar melakukan revalidation halaman yang ditentukan.

Untuk memicu revalidation ini, Anda perlu mengirim permintaan POST ke API route ini (misalnya, dari webhook CMS setelah konten diperbarui). Pastikan untuk mengamankan API route Anda dengan secret token untuk mencegah akses yang tidak sah.

Beli Load Balancer

Kesimpulan

Incremental Static Regeneration (ISR) di Next.js adalah solusi cerdas untuk menyajikan konten dinamis dengan performa statis, menawarkan kecepatan, SEO unggul, dan fleksibilitas pembaruan tanpa mengorbankan waktu build. Bagi Anda yang ingin memaksimalkan potensi Next.js dengan infrastruktur yang andal dan performa tinggi, Nevacloud menyediakan layanan hosting cloud yang optimal untuk aplikasi Next.js Anda. Percayakan performa website dinamis Anda pada Nevacloud, dan rasakan kemudahan serta keandalan hosting generasi terbaru.