Mengenal Astro, Framework SSG dengan Banyak Kelebihan

Astro framework begitulah salah satu kerangka kerja pembuat situs statis dari bahasa pemrograman JavaScript ini dinamakan.

Sebelumnya, apakah kamu sudah tahu tentang Astro? Jika belum, mari kita eksplor lebih lanjut mengenai Astro Framework dan apa yang membuatnya begitu istimewa

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 (react.js, vue.js, svelte.js, lit.js, solid.js dll).
• adanya SSR(server side rendering)
• menggunakan pendekatan island architecture
• memiliki fitur prerendering
• 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 templating/layouting menggunakan elemen <slot />
• otomatis generate file sitemap.xml dan feed.xml
• mendukung preprosesor css seperti sass, less dan stylus
• mendukung untuk styling dengan css modules

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 yang merupakan web officialnya framework astro.

Kemudian bagaimana dengan perkembangan framework astro hingga saat ini?

Perubahan Fitur Dari Astro Versi 1 - 3

Berikut adalah perubahan fitur dari versi 1 ke 3 astro js yang dapat kamu lihat dibawah ini:

• Versi 1 dirilis pada Juli 2022. Fitur-fitur utama yang dimiliki oleh versi ini adalah:

  • Menghasilkan website statis dengan sintaks HTML yang mendukung JavaScript dan JSX.
  • Mendukung berbagai framework frontend populer seperti React, Vue, Svelte, dll dengan cara mengimpornya sebagai komponen.
  • Menggunakan Vite sebagai bundler dan dev server yang cepat dan modern.
  • Menggunakan Snowpack sebagai build tool yang memanfaatkan ESM dan HMR.
  • Menggunakan remark dan rehype sebagai plugin untuk mengolah Markdown dan MDX.
  • Menggunakan Astro.fetchContent() untuk mengambil data dari file atau folder lokal.
  • Menggunakan Astro.resolve() untuk mendapatkan URL absolut dari file atau folder lokal.
  • Menggunakan Astro.canonicalURL untuk mendapatkan URL kanonik dari halaman saat ini.
  • Menggunakan Astro.site untuk mendapatkan informasi tentang situs saat ini, seperti nama, deskripsi, dan URL.
  • Menggunakan RSS untuk membuat feed dari koleksi konten.
  • Menggunakan legacy.astroFlavoredMarkdown untuk mengaktifkan fitur Markdown khusus Astro.

• Versi 2 dirilis pada Januari 2023. Fitur-fitur utama yang ditambahkan atau diubah oleh versi ini adalah:

  • Menambahkan dukungan untuk Node 16 dan menghapus dukungan untuk Node 14.
  • Menambahkan fitur partial hydration untuk menghidrasi bagian-bagian tertentu dari halaman yang membutuhkan interaktivitas.
  • Menambahkan fitur prerendering untuk membuat halaman web statis dari data dinamis.
  • Menambahkan fitur CSS modules untuk menulis gaya CSS yang terisolasi dan modular.
  • Menambahkan fitur layout untuk membuat template halaman yang bisa digunakan kembali.
  • Menambahkan fitur routing dan navigation untuk menghubungkan komponen atau halaman dengan URL yang sesuai.
  • Menambahkan fitur middleware untuk menambahkan logika khusus ke server pengembangan atau produksi.
  • Menambahkan fitur endpoint untuk membuat fungsi serverless yang bisa diakses melalui URL.
  • Menambahkan fitur image optimization untuk mengoptimalkan ukuran dan format gambar secara otomatis.
  • Menambahkan paket integrasi dengan nama @astrojs/ yang bisa digunakan untuk menghubungkan astro js dengan platform atau layanan lain, seperti Node, Cloudflare, Markdoc, dll.
  • Mengubah konfigurasi plugin Markdown dan MDX agar tidak menonaktifkan plugin bawaan Astro secara default.
  • Mengubah akses plugin ke frontmatter agar tidak bisa memodifikasi atau menambahkan data ke frontmatter.
  • Mengubah konfigurasi RSS agar tidak menggunakan Astro.site sebagai sumber data, melainkan menggunakan frontmatter halaman RSS itu sendiri.
  • Mengubah dukungan IDE untuk Svelte agar menggunakan plugin Svelte for VS Code alih-alih Svelte Language Server.
  • Menghapus fitur legacy.astroFlavoredMarkdown karena sudah tidak diperlukan lagi.
  • Menghapus fitur Astro.resolve() karena sudah tidak relevan lagi dengan sistem build baru Astro.
  • Menghapus fitur Astro.fetchContent() karena sudah digantikan oleh fitur content collections.
  • Menghapus fitur Astro.canonicalURL karena sudah digantikan oleh fitur routing dan navigation.

• Versi 3 dirilis pada Agustus 2023. Fitur-fitur utama yang ditambahkan atau diubah oleh versi ini adalah:

  • Menambahkan fitur view transitions untuk memberikan efek transisi halus antara halaman, seperti fade, slide, morph, dan persist. Fitur ini memanfaatkan API baru dari platform web, seperti App History API dan Portals API.
  • Menambahkan fitur testing untuk melakukan pengujian otomatis terhadap proyek astro js dengan menggunakan alat seperti Jest, Cypress, atau Chrome DevTools.
  • Menambahkan fitur troubleshooting untuk membantu pengguna menemukan dan memperbaiki masalah yang muncul di proyek astro js dengan menggunakan alat seperti Error Reference, NPM Package Format, dan Contributor Guides.
  • Memperbaiki beberapa bug yang berkaitan dengan gaya CSS di Windows, hidrasi di koneksi lambat, dan resolusi gambar di dev dan Node SSR.
  • Memperbaiki beberapa bug yang berkaitan dengan hidrasi, resolusi gambar, dan gaya Astro dan Vite yang terduplikasi.
  • Menghapus beberapa fitur eksperimental yang sudah tidak diperlukan lagi, seperti Astro.isPage, Astro.isAstroComponent, dan Astro.isDynamicComponent.
  • Mengubah beberapa fitur eksperimental menjadi fitur stabil, seperti image optimization, partial hydration, prerendering, dan CSS modules.
  • Mengubah beberapa fitur eksperimental menjadi fitur beta, seperti view transitions, testing, dan troubleshooting.
  • Mengubah beberapa fitur beta menjadi fitur alpha, seperti middleware, endpoint, dan integrasi.
  • Mengubah beberapa fitur alpha menjadi fitur experimental, seperti content collections, scripts and event handling, dan imports.
  • Mengubah beberapa fitur experimental menjadi fitur deprecated, seperti Astro.site,Astro.fetchContent, dan Astro.canonicalURL.

Bagaimana?

Banyak sekalikan perubahan-perubahan yang telah berubah dari astro.

Semoga kamu tidak pusing ketika membaca setiap perkembangan fitur dari salah satu framework SSG(Static Site Generator) terbaik ini.

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 framework 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 apakah situs kita berbentuk blog, ecommerce, company profile, portfolio. Hanya saja sejauh ini yang cocok menurut saya adalah blog, company profile serta portfolio.

Bagaimana dengan ecommerce (Toko Online)?

Tentu saja bisa, akan tetapi mengingat framework astro hanya dibuat dalam ruang lingkup frontend, maka dengan demikian masih memerlukan sisi backend untuk menampilkan setiap produk agar dapat berubah secara dinamis.

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, yang tentu saja akan dijelaskan secara detail untuk tutorial install framework astro.

Pelajari : 📖 Belajar Astro JS #1: Cara Install Framework Astro JS