Mengenal Astro JS, Framework Website berbasis Javascript Modern - Ada istilah bahwa setiap hari akan lahir framework javascript baru, tentu ini menjadi menarik karena javascript saat ini merupakan salah satu bahasa pemrograman terpopuler saat ini. Javascript bisa digunakan untuk website development, mobile development, desktop development bahkan game development.
Nah salah satu framework berbasis javascript yang tergolong masih baru tetapi memiliki potensi yang sangat bagus untuk berkembang dan mulai banyak dilirik oleh para web developer khususnya yaitu Astro JS. Lalu apa itu Astor JS? Astro JS sendiri adalah framework javascript yang difokuskan untuk pengembangan website atau web development, dengan tagline mereka Astro powers the world's fastest websites, client-side web apps, dynamic API endpoints, and everything in-between.
Lalu apa yang membuat Astro JS ini mulai dilirik dibandingkan dengan framework javascript lainya? Disini saya akan merangkum hal hal yang menjadi alasan kenapa Astro JS ini disukai web developer:
Sangat Ramah Terhadap Pemula
Asto JS Berbeda dengan Framework atau Library Javascript lain yang populer seperti React atau VueJS,. Astro sendiri memiliki eksensi .astro (dot astro) untuk filenya. Dengan memiliki struktur dasar seperti HTML Biasa, hal inilah yang membuat pengguna bahkan yang baru belajar web development mudah untuk menggunakanya. Karena tidak seperti yang lain semisal React yang harus mempelajari lagi JSX, nah untuk astro ini sangat mirip sekali dengan html biasa. Berikut contoh isi file index.astro
Cepat
Astro JS bisa dibilang Fast by default. Mereka sendiri mengklaim bahwa astro JS memiliki performa melebihi NextJS, Gatsby dan NuxtJS. Dengan Islands nya yang bisa mengoptimalkan kinerja website dengan penggunaan javascript yang efisien ketika di build. Island sendiri merupakan arsitektur frontend yang dapat mengoptimalkan kinerja website dan mengefisiensikan penggunaan javascript ketika dibuild, sehingga ketika proses production setiap kompnen di render hanya menjadi HTML dan CSS sehingga lebih cepat dimuat.
Mendukung SSR
Server Side Rendering atau SSR merupakan hal penting ketika kita memikirkan Search Engine Optimization atau S.E.O dalam membangun sebuah Website. Seperti yang kita ketahui bersama, kebanyakan framework javascript itu sifatnya Client Side Rendering (CSR) dimana konten akan dimuat disisi Client. Kita bahas sekilas dulu tentang CSR, Apa untung dan ruginya CSR Ini?
-Keuntungan CSR in diantaranya:
- Load website jadi lebih cepat karena dimuat di sisi client.
- Kode HTML di production jadi sangat Singkat
- Mengurangi Beban Server
- Cocok dipakai untuk dashboard admin/user
-Kerugian CSR diantaranya:
- Tidak ramah S.E.O, hal ini karena search engine tidak membaca isi konten yang dimuat di javascriptnya.
- Isi konten akan Kosong dulu, jika internet client lambat, maka user akan melihat halaman kosong sebelum javascriptnya selesai dimuat.
- Nilai Core Vital (seperti LCP / Largest Contentful Paint dan CLS / Cumulative Layout Shift tidak sesuai aslinya
Sekarang, kita bandingkan dengan Server Side Rendering atau SSR. berikut keuntungan dan kerugian penggunaan SSR.
-Keuntungan SSR:
- S.E.O optimal, karena semua konten dimuat di sisi server, search engine akan mudah meng-crawl isi konten kita ketika website selesai dimuat.
- Meningkatkan skor Web Core Vital.
- Konten atau isi website akan langsung terlihat ketika client selesai memuat website tanpa harus menunggu memuat lagi.
-Kerugian SSR:
- Kecepatan Loading website tidak secepat CSR.
- Beban server akan meningkat.
Astro JS sendiri menerapkan konsep Server First, sehingga selain cepat astro juga sangat memperhatikan S.E.O pada sebuah website. Selain itu, terdapat pula adapter SSR seperti Node, Netlify, Vercel dan Cloudflare.
Mudah integrasi dengan Frontend Library/Framework lain seperti React, Preact, HTMX, Vue bahkan Svelte
Kelebihan Astro JS selanjutnya adalah kemudahan dalam integrasi dengan framework / library frontend lain seperti React JS, , Preact, HTMX, Vue bahkan Svelte. Jadi dalam 1 Project Astro kita bisa menggunakan React JS sebagai komponen didalamnya yang bisa di load sebagai Client side Rendering atau bahkan Server Side Rendering. Mantap lah pokoknya. Selain itu Astro Juga mendukung Typescript.
Migrasi dari belajar HTML, CSS, JS Terbilang Mudah
Jika kalian baru belajar web development dan bingung dalam menentukan frontend framework yang akan digunakan, saya rasa Astro JS adalah pilihan yang tepat. Karena sintak astro seperti HTML, CSS dan JS biasa. Untuk sisi server side nya sintak Astro Js ini biasanya ditulis dipaling atas dengan dibungkus dengan tanda minus 3 kali ( --- ) dan diakhiri dengan tanda yang sama pula ( --- ) Seperti ini contohnya:
Itulah artikel tentang mengenal Framework Astro JS, Semoga bermanfaat!
