The concept of Pre-Rendering - Chapter 3 (Bahasa Indonesia)

Thanks for reading.. Ini adalah chapter 3 dari pembahasan Next js as your Web Development Framework. Jika kamu beum membaca chapter sebelumnya silahkan kunjungi artkel tersebut di pada link dibawah. Ok, mari kita lanjutkan...

React adalah salah satu framwork javascript yang paling populer sekarang ini. React menggunakan javascript untuk menampilkan UI (render). Secara konsep, ketika aplikasi React diakses, React akan menjalankan kode javascript pada sisi client-side. Inilah yang menjadikan React app relative lebih cepat secara akses untuk user. Tetapi, hal ini menimbulkan beberapa kekurangan tertentu:

React selalu butuh javascript untuk melakukan render component pada browser. Jadi, ketika user mematikan fitur javascript pada browser-nya, React app tidak akan termuat dan menghasilkan blank page.

React app dimuat pada sisi Client-side, yang berarti pada initial load, server hanya akan mengembalikan halaman kosong, kemudian ketika terinisialisasi, Javascript pada browser akan memuat halaman supaya aplikasi menjadi interaktif.

Halaman yang kosong pada initial load menjadi kekurangan khususnya penerapan SEO pada aplikasi.

Pre-rendering sendiri adalah sebuah konsep dimana server melakukan render terhadap application component dengan segala data yang ada pada komponen tersebut sebelum dikirim kepada user dalam bentuk file HTML. Menampilkan file HTML yang telah siap akan membuat browser menampilkan aplikasi jauh lebih cepat secara akses maupun performa.

Next.js secara default melakukan pre-rendering kepada seluruh page (semua file javascript yang ada di dalam folder pages), menjadi file HTML dibandingkan harus melakukan rendering pada client-side. File HTML ini hanya menggunakan javascript code secara minimal yang hanya terasosiasi dengan halaman tersebut. Ketika file HTML ini berhasil dimuat oleh browser, barulah javascript code berjalan untuk membuatnya lebih interaktif.

Jika secara tampilan dan fungsi relatif sama antara plain react dan next.js, terus apa bedanya?

Yes, memang secara tampilan akan sama saja antara plain react dan next.js. Kita bisa lihat ini jika melihat HTML element yang di render pada masing-masing aplikasi (Right Click -> inspect -> Elements)

Tapi, jika kita periksa page source (Right Click -> View page source) pada masing-masing aplikasi, kita bisa lihat bahwa plain react hanya menampilkan satu element dengan id 'root', element lainnya tidak tersedia pada page source. Hal ini terjadi karena element lainnya (h2, img, p, dsb) di-render pada sisi client-side setelah javascript dimuat ke browser.

Sedangkan pada Next.js, semua element di-render ketika build phase oleh server menghasilkan file HTML yang berisi semua element yang terasosiasi dengan halaman tersebut, sehingga kita bisa melihat seluruh kode HTML pada page source. Hal ini yang membuat next.js lebih unggul khususnya jika aplikasi memerlukan pengaplikasian SEO. Google lebih mudah mendeteksi web aplikasi dengan kode HTML yang lengkap seperti ini untuk dilakukan crawling dan indexing.

Ada beberapa alasan kenapa kita perlu mempertimbangkan untuk menggunakan pre-rendering pada aplikasi kita:

Improve Performance Karena react app di-render di client-side, maka sebenarnya kita harus menunggu semua code javascript dimuat terlebih dahulu oleh browser untuk melakukan beberapa hal yaitu render component dan/atau fetching data. Ada 'waktu tunggu' yang dialami oleh user, apalagi untuk mereka yang mengakses dengan koneksi yang tidak baik. Sedangkan di next.js, browser akan memuat file HTML yang sudah siap karena telah di-render pada build phase.

SEO friendly Search Engine sejatinya akan membaca keseluruhan HTML pada suatu website agar bisa melakukan crawling dan indexing. Semakin banyak informasi yang didapatkan oleh search engine, semakin baik untuk peringkatan hasil pencarian pada search engine. Pada aplikasi plain react, yang akan ditemukan oleh Search engine hanyalah satu div tag dengan id 'root' seperti yang ada pada page source, and that' s it. Setidaknya sampai saat ini sebagian besar search engine belum dapat membaca file javascript dengan baik dibandingkan HTML. Semoga saja kedepannya akan ada optimasi akan hal ini. Sedangkan pada aplikasi Next.js, semua element dapat ditemukan pada page source, sehingga search engine mendapatkan informasi yang cukup tentang website kita untuk dilakukan indexing pada search engine.

Dengan segala keunggulan yang dimilikinya, metode pre-rendering mungkin akan cocok bagi aplikasi-aplikasi yang membutuhkan penerapan SEO dan peningkatan performa. Di Next.js ada dua metode yang bisa kita aplikasikan untuk mencapai tujaun ini:

Static Site Generations (SSG) Metode ini akan membuat Next.js menghasilkan file HTML pada build phase. File HTML inilah yang nantinya akan di gunakan ulang untuk setiap user yang melakukan request pada aplikasi.

Server-side Rendering (SSR) Metode ini akan membuat Next.js menghasilkan file HTML untuk setiap request yang dilakukan oleh user. Sehingga user akan mendapatkan informasi atau data yang selalu update disetiap request-nya.

Kita bisa menggunakan SSG atau SSR atau Hybrid dalam aplikasi kita sesuai dengan kebutuhan aplikasi yang ingin dicapai.

Pada chapter selanjutnya, kita akan fokus membahas bagaimana mengaplikasikan Static Site Generation termasuk cara menggunakan, kenapa digunakan, dan kapan harus digunakan pada aplikasi Next.js.