Implementasi SSR, SSG, ISR, dan CSR pada Next.js App Router
Next.js adalah salah satu framework paling populer untuk React. Next.js menawarkan banyak sekali fitur yang dapat meningkatkan SEO dan performa dari website yang kita bangun. Beberapa fitur yang dimiliki oleh Next.js adalah menyediakan berbagai macam metode rendering website. Diantaranya yaitu Server Side Rendering (SSR), Static Site Generation (SSG), Incremental Site Generation (ISG), dan Client Side Rendering (CSR). Setiap metode ini memiliki kegunaannya masing-masing. Pada artikel kali ini, kita akan mempelajari kegunaan, dan implementasi dari masing-masing metode rendering.
Server Side Rendering (SSR)
Metode ini memungkinkan halaman di-render dari sisi server, sehingga kode yang dikirim pada client adalah halaman yang telah sepenuhnya di-render sehingga tidak membebankannya pada sisi client. Next.js App Router versi 13 ke atas secara default menggunakan metode rendering ini. Sehingga developer tidak perlu menambahkan kode apapun untuk menggunakannya.
Client Side Rendering (CSR)
Metode ini merupakan kebalikan dari SSR, di mana halaman website di-render dari sisi client, server hanya mengirimkan kode JavaScript minimal ke client, kemudian client mengurus render halaman. Metode ini cocok untuk halaman yang tidak membutuhkan performa SEO yang baik. Untuk menerapkan metode ini, developer hanya perlu menambahkan flag “use client” pada bagian atas komponen. Secara otomatis Next.js akan menganggap bahwa komponen atau halaman ini harus di-render di client.
Static Site Generation (SSG)
Metode ini memungkinkan halaman di-render pada waktu build sehingga menghasilkan halaman statis yang di-cache dan dapat dilayani dengan sangat cepat kepada pengguna. SSG sangat berguna untuk halaman yang kontennya jarang berubah, seperti halaman blog atau dokumentasi. Untuk menggunakan SSG dengan Next.js App Router, kita perlu menggunakan fungsi generateStaticParams untuk menentukan jalur statis yang ingin kita buat.
Incremental Site Generation (ISR)
ISR memungkinkan Anda untuk memperbarui konten statis setelah build tanpa perlu re-build seluruh situs. Anda bisa menentukan interval waktu untuk memperbarui halaman statis tersebut. Dengan ISR, Anda mendapatkan keuntungan dari SSG dan juga fleksibilitas dalam meng-update konten. Untuk menggunakan ISR dengan Next.js App Router, kita perlu menambahkan properti revalidate pada objek yang dikembalikan oleh generateStaticParams.
Kesimpulan
Next.js menyediakan berbagai macam metode rendering yang dapat disesuaikan dengan kebutuhan aplikasi. SSR cocok untuk halaman yang memerlukan SEO tinggi dan dinamis, CSR untuk interaktifitas tinggi yang tidak memerlukan SEO, SSG untuk konten statis yang jarang berubah, dan ISR untuk fleksibilitas dalam memperbarui konten statis. Dengan memahami kegunaan dan implementasi dari setiap metode ini, kita dapat meningkatkan performa dan pengalaman pengguna dari aplikasi Next.js