Mengenal Astro, framework SSG dengan banyak kelebihan

Di zaman serba teknologi sekarang ini, ada banyak framework yang bermunculan dengan menawarkan beragam fitur dan keunggulan.

Begitu juga dengan Astro, sebuah teknologi yang dapat digunakan untuk pengembangan sebuah website dengan banyak kelebihan yang ditawarkannya.

Sebelumnya apakah kamu sudah tahu dengan astro?

Apa itu Astro?

Astro merupakan sebuah framework yang digunakan untuk membuat situs web statis dengan fitur hidrasi parsial, berbasis komponen, cepat dalam time load page website, mendukung SEO(Search Engine Optimization) serta ada banyak lagi keunggulan yang dihadirkan oleh framework ini.

Astro adalah salah satu kerangka kerja yang dijuluki dengan Meta Framework, itu karena didalam framework ini kita dapat menggunakan library/kerangka kerja populer lainnya dari javascript, seperti react.js, vue.js, svelte, solid.js, preact, alpine.js serta lit.js

Dari ke 7 framework populer diatas kita jadi mengetahui satu hal yaitu Astro benar-benar luar biasa sebagai kerangka kerja pengembang situs statis, karena dapat membangun sebuah sistem web menggunakan ketujuh framework populer diatas.

Tidak hanya itu sebagai pengembang situs statis, astro memiliki fitur yang tak kalah bersaingnya dibanding generator situs statis lainnya, seperti dapat membuat halaman web hampir 100% tanpa javascript.

Pertanyaannya, kok bisa?🤔

Bukannya halaman web tanpa javascript itu terlihat kaku karena tidak ada hal interaktif yang terjadi didalamnya?

Disinilah salah satu kelebihan yang telah hadir pada framework ini, yaitu sebenarnya astro masih menggunakan javascript, hanya saja ketika astro melakukan build page(menghasilkan halaman web), website yang dihasilkan tersebut meski tanpa javascript akan meningkatkan kecepatan waktu loading website.

Menurut astro sendiri apabila sebuah situs web terlalu banyak memiliki ratusan hingga ribuan kode-kode javascript maka yang terjadi ialah dapat memperlambat time load web saat browser pertama kali merender sebuah halaman web.

Saya yakin kita akan setuju bahwa kecepatan sebuah halaman web adalah keharusan yang harus dipikirkan bagi setiap pengembang atau developer.

Begitu juga dengan astro dengan slogannya “Build fast websites, faster” artinya bangun situs web cepat, lebih cepat.

Dengan cara yang bagaimana?

Tentu saja dengan mengirimkan lebih banyak HTML, sedikit javascript. Ya itulah yang ditawarkan oleh astro sang generator situs statis.

Perilaku astro membuat halaman web sedikit javascript disebut dengan hidrasi parsial, yang fungsi atau kegunaan utamanya ialah mempercepat waktu load halaman website.

Sekilas tentang hidrasi parsial

apa itu hidrasi parsial? dalam pengembangan web modern, hidrasi parsial merupakan salah satu teknik dimana hanya komponen dari web yang dibutuhkan untuk dirender oleh browser pada sebuah halaman website.

Lebih jelasnya ialah ketika sebuah halaman web memiliki komponen, dimana komponen itu memerlukan ui yang interaktif, maka sudah pasti memerlukan javascript.

Akan tetapi karena javascript dapat membuat kinerja sebuah halaman web menjadi lambat, dengan demikian diperlukannya teknik hidrasi parsial agar komponen web yang menggunakan javascript tersebut dirender supaya sepenuhnya menjadi komponen statis HTML.

Sedangkan menurut wikipedia, hidrasi parsial adalah sebagai berikut:

hydration or rehydration is a technique in which client-side JavaScript converts a static HTML web page, delivered either through static hosting or server-side rendering, into a dynamic web page by attaching event handlers to the HTML elements.

Adanya teknik seperti ini di bidang web development, maka setiap website yang dibuat tidak hanya dapat meningkatkan kecepatan loading website, akan tetapi salah satu kelebihan lainnya adalah high performance yang didapatkan.

Kita kembali lagi ke astro 😇, selain hidrasi parsial apa saja fitur yang ditawarkan oleh kerangka kerja ini?

fitur Astro

Ada beberapa fitur yang disediakan oleh framework astro diantaranya.

• mendukung banyak framework dan library javascript
• adanya SSR(server side rendering)
• mendukung penggunaan markdown
• berbasis komponen
• mendukung optimasi SEO(search engine optimization)
• penulisan kode berbasis javascript dan typescript
• adanya hidrasi parsial(fitur unggulan)
• penulisan nama file menggunakan .astro
• sistem templat/layouting menggunakan <slot />
• otomatis generate file sitemap.xml dan feed.xml
• mendukung preprosesor css seperti sass, less dan stylus

Diatas adalah segelintir fitur yang astro telah tawarkan dan kembangkan, ada banyak hal lainnya yang dapat kamu baca di dokumentasi astro secara resmi yaitu di astro.build.

Pertanyaan mengenai Astro

Ada beberapa hal yang mungkin menjadi pertanyaan di benak kepala kita mengenai seperti apa framework astro. Diantaranya:

1. Situs apa saja yang telah menggunakan astro?

Tak perlu jauh-jauh situs saya ini telah menggunakan astro sebagai tools atau alat untuk membangun blog saya ini yaitu staykoding. Sayapun telah menjelaskan alasan memindahkan blog staykoding ini ke astro. Bisa baca disini: staykoding migrasi dari blogger ke astro.

2. Astro ditulis dengan bahasa pemrograman apa saja?

Berdasarkan dokumentasi yang saya lihat di situs maupun repository github astro, terlihat jika astro menggunakan bahasa javascript sebagai bahasa utamanya beserta typescript.

3. Kapan saya harus menggunakan atau migrasi situs ke Astro?

Ada bebarapa hal yang harus dipikirkan apakh situs kita berbentuk blog, ecommerce, company profile, portfolio. Hanya saja sejauh ini yang cocok menurut saya adalah blog, company profile serta portfolio.

Untuk ecommerce saya rasa masih belum, karena mengingat astro masih dalam versi beta, yaitu kemungkinan masih berubah dalam sistem struktur kodenya.

Mungkin hanya 3 pertanyaan ini saja dulu yang bisa saya jawab, mengenai pertanyaan lainnya tentu saja artikel ini akan terus di update.

Kesimpulan

Astro dapat dikatakan lebih dari sebuah framework atau SSG(static site generator) dengan mengusung dirinya sendiri sebagai meta framework karena dapat menggunakan library/framework lain di javascript sebagai pembentuk komponen web yang dibuatnya.

Tak hanya itu adanya sistem hidrasi parsial yang menghidrasi sebuah komponen di web agar 100% menjadi statis HTML membuat sebuah situs web yang dibuat tersebut dalam hal kecepatan loading websitepun menjadi lebih cepat.

Terimakasih cukup sekian pembahasan kita kali ini mengenai apa itu astro sebagai sebuah framework SSG. Dan kita juga telah mengenal beberapa hal mengenai astro. semoga bermanfaat.

Selanjutnya belajar apa?

Berikutnya kita akan belajar cara menginstall astro untuk projek web pertama kita, nantikan saja artikel saya selanjutnya😊.