Apa itu React Server-Side Rendering yang Sering Diperbincangkan
React Server — Side Rendering
Terdapat banyak sekali informasi mengenai react server-side rendering. Namun, pertanyaan pertama kali yang harus kalian lontarkan adalah “haruskah kita menggunakannya ?”
React server-side rendering sangat keren, pertama kali saya mengetahui bahwa react yang terkenal dengan library front-end ternyata dapat dirender dari sisi backend saya merasa begitu hype mengenai hal ini. Dan saya merasa ini harus dipakai, namun sesuatu yang keren pasti memiliki drawback.
Sebelum, kalian terjun ke dunia react server-side rendering, pertimbangkan dengan baik:
Apakah react server-side rendering adalah sesuatu yang make sense untuk aplikasi react saya ?
Berikut beberapa hal yang harus dipertimbangkan ketika kita berbicara mengenai react server-side rendering:
#1. Search Engine Optimization
React server-side rendering dapat membantu search engine melakukan crawling konten website kita, tapi somehow khusus untuk google kita bisa membuat google melakukan crawling konten tanpa menggunakan react server-side rendering.
Wait, sebenarnya apa itu Server-side rendering ?
Pada umumnya, jika kita menggunakan react, browser akan mendownload halaman html, dan konten dari web akan terisi oleh javascript.
Dengan react server-side rendering, konten akan digenerate dari sisi server, sehingga browser dapat mendowload html yang sudah dirender oleh react dari sisi server. Update konten akan tetap dihandle oleh browser.
Sejarahnya, crawling dari search engine tidak mendukung javascript. Aplikasi yang seluruhnya dibuild dengan react, akan di crawl oleh search engine sebagai halaman kosong. Yang artinya halaman kita sama sekali tidak muncul.
React server-side rendering, dapat menyelesaikan masalah ini.
Namun ada cara lain, Google sekarang sudah dapat merender javascript dalam kondisi tertentu dengan cara fetch and render pada google web master. Jika fitur ini bekerja dengan baik pada aplikasi react kalian, kalian dapat menyimpan tenaga dan usaha dan skip untuk melakukan react server-side rendering.
Namun lagi, fitur fetch and render hanya ada di google, sehingga di search engine lain seperti yahoo, bing, dan lain lain tidak dapat melakukan crawling pada konten kita.
#2. Performance
React server-side rendering meningkatkan performance aplikasi kita, namun . . . .
React server-side rendering dapat meningkatkan performance dalam banyak situasi tetapi menurunkan performance di lain hal.
- React Server side rendering meningkatkan performance
Setelah browser mendownload HTML dan CSS, konten dapat ditampilkan tanpa harus menunggu browser mendownload javascript atau react merender konten.
Jika file javascript kalian sangatlah besar, react server-side rendering dapat meningkatkan performance sangat pesat
- React Server side rendering menurunkan performance
React server-side rendering bekerja dibagian server-side, sehingga HTTP Response akan sedikit lama untuk direturn. Semakin lama jika server dalam kondisi yang berat (banyak trafik).
Ukuran dari HTML akan bertambah dan akan membutuhkan waktu untuk didownload oleh browser. Untuk sebagian besar aplikasi hal ini sangat sepele, tapi dapat menjadi masalah jika react component terdapat list yang sangat panjang atau berbentuk table.
Ketika user meload beberapa halaman dalam website kita, file javascript akan di cached oleh browser. React server-side rendering tidak lebih meningkatkan performance dalam kondisi ini.
Dari sini kita mendapat kesimpulan, react server-side rendering tidak lebih baik atau tidak lebih buruk dengan tanpa server-side rendering.
#3. Complexity
React server-side rendering meningkatkan complexity dari aplikasi kalian, yang artinya waktu yang sedikit untuk mengerjakan fitur lain dan improvement lain.
React server-side rendering meningkatkan complexity dalam hal berikut:
- Node support, react component akan dijalankan oleh node js. Kita harus mengecek apakah window dan hal lain mengenai API dapat mengganggu sebelum menggunakan react server-side rendering.
- Two Routers, jika kita menggunakan react-router di bagian client, kita akan menggunakan hal yang sama pada bagian server.
- APIs, jika react component membuat request ke API,request ini mungkin perlu diperlakukan berbeda ketika mereka berjalan di server, mungkin dengan langsung query database atau logika aplikasi lainnya.
Menambahkan react server-side rendering bukanlah hal yang sepele, jadi jangan menggunakannya kecuali kalian membutuhkan performance dan SEO (kecuali google).
[+] gunakan React server-side rendering jika:
- Kalian membutuhkan SEO untuk search engine selain google seperti yahoo, bing, baidu, dan lain lain.
- Kalian telah mengerjakan aplikasi react, dan membutuhkan performance terbaik, dan lagi ingin membayar extra resource untuk server
[-] jangan menggunakan react server-side rendering jika:
- aplikasi react kalian belum selesai.
- SEO di google sudah cukup baik (pastikan google dapat melakukan crawling pada konten kalian).
- Resource server kalian sangat terbatas.
Alternatif lain dari react server-side rendering, jika kalian tak ingin memakai react server-side rendering. berikut beberapa alternatif lain:
- Render client-side seperti biasa, dengan mengandalkan google — bot yang dapat merender javascript untuk SEO, dan kalian dapat fokus meningkatkan performance dengan cara lain. namun SEO kalian akan sedikit buruk pada search engine selain google.
- Taruh beberapa informasi di tempat dimana react akan merender html. Crawler google akan melihat hal tersebut, dan react akan menggantikannya. Seperti ini
- prerender adalah sebuah service yang akan menyimpan versi cached dari halaman website. Hal ini tentu akan membantu dibagian SEO dan performance, dan tetap menjaga code tetap simple.
jangan menggunakan react server-side rendering hanya karena hal tersebut terlihat keren. Hal yang keren akan membutuhkan bayaran :p
Pertimbangkan apakah react server-side rendering adalah hal yang make sense untuk aplikasi kalian.
CTO saya pernah berkata, ada 3 tipe programmer,
- over engineer, programmer yang terlalu berlebihan misalnya bikin simple app namun membuat banyak server, replica, dengan cost yang sangat tinggi.
- normal engineer.
- lower engineer, programmer yang tidak memikirkan hal lebih lanjut ketika membuat app.
apakah react server-side rendering adalah sesuatu yang over engineer untuk aplikasi kalian ?
Sekian, artikel mengenai react server-side rendering, untuk artikel berikutnya saya akan langsung membuat tutorial mengenai aplikasi react app berbasis website dengan menggunakan server-side rendering.
welcome to Engine — Y 🙂
“Action = reaction” ~ Newton’s Third Law
Special thanks: andrewhfarmer.com
Originally published at nginy.net on April 8, 2017.
