Journey to Astro - #1 Pre-Condition

#beginners #astro #indonesia

Saya sudah hampir 6 bulan mendalami Next.js yang berbasis React.js sebagai library utama dan didominasi oleh kekuatan Javascript didalamnya. Namun saat ini saya sedang mengeksplorasi bagaimana Astro bekerja, karena dari yang saya baca, Astro mampu memberikan performa yang jauh lebih baik dari framework web development manapun.

Melalui postingan berkala ini, saya akan membagikan pengalaman saya dalam mendalami Astro sekaligus memberikan sedikit perbandingan dengan Next.js sebagai framework yang saat ini menjadi acuan utama para web developer.

!!! Quick review, website terdiri atas 3 komponen utama :

HTML : Struktur halaman / DOM (Document Object Model)
CSS : Styling DOM
Javascript : Membangun interaksi/halaman dinamis
React.js : salah satu library terkenal dengan berbasis component (https://react.dev/)
Next.js : salah satu framework web development yang sedang naik daun (https://nextjs.org/)

Bagaimana React.js menampilkan sebuah webpage ?

Proses utamanya terdiri atas 2 tahap, yakni Render & Hydration.

Render adalah proses dimana React akan membangun DOM structure website anda sehingga anda sudah bisa melihat hasil akhir web nya secara tampilan namun belum bisa dilakukan interaksi apapun.
Hydration yaitu proses dimana React akan mencari DOM yang perlu dipasangkan Javascript untuk membangun interaksi yang dinamis.

Kondisi setelah Render :

Kondisi setelah Hydration :

Kesimpulannya adalah bahwa React.js secara default akan melakukan proses Hydration, dan di Next.js proses Hydration ini pasti dilakukan di level halaman setiap mau menampilkan sebuah webpage.

"Wah" jadi agak lemot dong ya karena ada 2 proses ini ?

Secara user menurut saya 2 hal ini tidak akan begitu terlihat.. hanya akan terlihat apabila memang halaman sebuah website menggunakan Javascript yang berlebihan. Contohnya mungkin website berbasis wordpress, atau web lain yang interaksinya kompleks & banyak hal yang dinamis disana.

Lalu bagaimana solusinya ? Disinilah alasan mengapa Astro hadir. Astro menawarkan berbagai efisiensi yang bisa dilakukan untuk menghindari rendering javascript yang tidak dibutuhkan. Berikut adalah beberapa klaim mereka :