Using Client Side Rendering (CSR) in Next.js - Chapter 7 (Bahasa Indonesia)

Thanks for reading.. Ini adalah chapter 7 dari pembahasan Next js as your Web Development Framework. Jika kamu belum membaca chapter sebelumnya silahkan kunjungi artikel tersebut pada link dibawah. Ok, mari kita lanjutkan…

SSG dan SSR akan sangat cocok untuk aplikasi atau halaman tertentu yang membutuhkan teknik pre-rendering untuk menampilkan kontennya. Tapi tidak semua membutuhkannya. Bagi aplikasi yang memiliki interaksi dengan user yang intensif dan tidak memerlukan teknik pre-rendering untuk aspek SEO dan performa, mungkin tidak perlu teknik SSG dan SSR. Sebagai contoh user profile dashboard, settings page, dan aplikasi user-direct content lainnya.

CSR memungkinkan kita melakukan rendering component pada client-side. Pada CSR, fetching data dilakukan langsung pada component level tidak seperti SSG dan SSR yang melakukannya pada server-side.

Pada saat build phase, Next.js akan memproduksi static HTML pada component yang menjadi default behaviour-nya. static HTML yang nantinya akan digunakan ulang oleh user saat melakukan request sebagai template. Kemudian pada component yang memiliki kebutuhan fetch data, akan berjalan pada client-side dan di-render menggunakan javascript. Behaviour inilah yang terjadi ketika kita menggunakan plain react dalam aplikasi kita.

Untuk melakukan fetching data pada client-side, kita bisa gunakan react hook useEffect. Cara ini akan memastikan bahwa component tertentu akan di-render setelah initial render terjadi.

Kita bisa menggunakan fetch atau library lainnya (ex: axios) untuk melakukan fetching data pada component. Namun untuk optimasi yang lebih baik Next.js juga menyediakan react hook tersendiri yang terotomasi untuk melakukan tugas yang sama yaitu swr.

swr adalah react hook yang khusus dibuat untuk optimasi fetching data pada aplikasi Next.js. Dengan swr data secara otomatis akan di-chace pada browser dan melakukan revalidate pada component ketika memasuki fase stale.

Untuk meggunakan swr kita perlu install library swr pada directory aplikasi kita. Kemudian pada page component, kita perlu mambuat fetcher function yang sebenarnya merupakan gungsi native fetch. Kita juga bisa menggunakan library lainnya seperti axios pada fetcher function.

Menggunakan contoh kode sebelumnya, kita bisa aplikasikan swr sebagai berikut:

Seperti dilihat pada kode diatas, dengan swr kita tidak perlu lagi menggunakan useEffect untuk melakukan fetching data karena sudah otomatis dikelola oleh useSWR untuk setiap request yang terjadi. Teknik ini membuat kode kita lebih rapih dan singkat dengan tetap mengoptimasi performa aplikasi.

Pada dasarnya, jika aplikasi memerlukan fungsi pre-rendering, akan sangat direkomendasikan untuk menerapkan teknik SSG atau SSR. Hal ini yang akan memastikan aplikasi teroptimasi dari sisi performa dan SEO. Namun jika aplikasi kita tidak membutuhkan hal tersebut, memerlukan fetching data yang intensif untuk setiap request yang terjadi, CSR menjadi teknik yang lebih baik untuk diaplikasikan.

Kita sudah sepenuhnya belajar mengenai bagaimana Next.js membantu kita dalam melakukan Pre-rendering melalui teknik Static Site Generations (SSG), Server Side Rendering (SSR) serta mengaplikasikan Client Side Rendering (CSR) pada aplikasi kita. Silahkan mengulang kembali chapter-chapter sebelumnya jika masih bingung dengan konsep-konsep yang kita bahas ini.

Next.js adalah fullstack framework yang berarti tidak hanya aspek frontend yang bisa kita gunakan, melainkan backend pula dalam satu aplikasi. Pada chapter selanjutnya kita akan membuat API dan implementasi API routes di Next.js.