Metode rendering secara langsung di client-side atau browser menggunakan JavaScript. Dengan metode ini, server mengirimkan file HTML yang sederhana dan file JavaScript. Dari file JavaScript tersebut, client akan melakukan fetching data dan merender final page secara dinamis.
Pada NextJS, Request CSR dapat dilakukan dengan 2 cara :
Kelebihan menggunakan CSR :
Kekurangan menggunakan CSR :
Dari pengalaman project-project sebelumnya yang menggunakan NextJS, berikut beberapa poin yang dapat menjadi learning poin berdasarkan real case :
Jika website bergantung kepada SEO untuk menarik pengunjung, maka CSR bukan metode yang terbaik. Search Engine akan kesulitan untuk melakukan index pada page yang di render menggunakan JavaScript atau di render pada client-side. Untuk hal ini, kita bisa menggunakan SSR atau SSG.
CSR dapat membuat Initial Load Page menjadi lambat karna mengharuskan browser untuk download, parse dan execute file JavaScript sebelum me-render page. Jika Initial Load Page menjadi hal yang kritikal dalam project, maka kita bisa menggunakan SSR atau SSG untuk mendongkrak Initial Load Page.
Karena proses fetching data terjadi di client, maka API akan ter-ekspos di network call browser. Hal ini
Page dengan konten static seharusnya jarang sekali terdapat perubahan. Maka akan lebih optimal jika kita menggunakan SSG sehingga dari sisi Performance dan SEO akan lebih optimal.
References:
https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering