Apa itu Astro.js ?

Apa itu Astro ?

Astro adalah sebuah web framework javascript yang teroptimasi untuk pengembangan yang lebih cepat, situs web berbasis konten.

Apa aja sih keunggulan astro.js ?

1. Server-first

Server-first, Astro.js memiliki keunggulan nya sendiri yaitu server-first. Astro.js mampu menaikkan performace website dengan cara menrendering sebuah components di server terlebih dahulu, lalu astro.js memproses nya menjadi sebuah HTML yang ringan ke browser tanpa ada javascript. Jadi ini menurut saya keunggulan paling bagus dalam menggunakan astro.js dan terbukti untuk meningkatkan performace dan seo website.

2. Content-Driven

Seperti yang dijelaskan tadi, bahwa astro.js berbasis konten. Astro.js dirancang untuk berfungsi dalam penulisan konten. Memuat data dari sistem file mu, API, atau CMS (Content Management System). Jadi menurut saya astro js ini seperti wordpress tetapi kamu bisa mengcustomize sesuka dirimu tanpa menghapus fitur penulisan konten.

3. Customizable

Kamu juga bisa mengcustomize dengan alat favorit mu, kamu juga bisa memakai sendiri javascript UI components, CSS libraries, tema, intergrasi dan lain-lain. saya merekomendasikan mengunakan Shadcn UI.

Astro Islands

Fitur yang hanya ada di astro.js dan mampu mengoptimasi website mu tidak seperti yang web framework lain. Manfaat dari astro ini adalah kinerja pemuatan halaman yang unik dapat meningkatkan nilai konversi, Core Web Vitals dan SEO (Search Engine Optimazition).

Data Real-World Core Web Vitals

Lihat full dataset, Menurut data performa dunia dari HTTP Archive dan juga Chrome UX Report.

Fleksibilitas

Astro juga support semua UI framework. jadi kamu bisa juga memakai react, vue, prereact, svelte, solid dalam satu project. Ini sungguh fitur yang luar biasa dimana lagi kamu bisa memakai berbagai framework dalam satu project astro.js.

---
import BuyButton from '../components/BuyButton.jsx';
import BuyButton from '../components/BuyButton.vue';
import BuyButton from '../components/BuyButton.svelte';

import { getProductDetails } from "ecommerce-package";
import ProductPageLayout from '../layouts/ProductPageLayout.astro';

const product = await getProductDetails(Astro.params.slug);
---

<ProductPageLayout>
  <img src={product.imageUrl} alt={product.imageAlt} />
  <h2>{product.name}</h2>
  <BuyButton id={product.id} client:load />
</ProductPageLayout>

Fitur Andalan astro.js

• Content Collections
• Zero JavaScript by Default
• View Transitions
• Middleware
• Actions
• Environment Variables
• Deployment Adapters
• UI Integrations
• Dev Toolbar

Baca dokumen lebih lengkap nya lagi di website Astro.js

Set Up Astro Project

Sebelum memulai penginstallan pastikan laptop atau pc kamu memenuhi syarat berikut:

• Node.js - v18.17.1 atau v20.3.0 atau versi yang terbaru untuk versi v19 masih belum support jadi pastikan versi node.js mu sudah kompetible dengan astro.js.
• Text Editor - Aku merekomendasikan menggunakan VS Code disana ada plugin official astro.
• Terminal - Cara mengakses Astro ada melalui command-line interface(CLI).

Install dari CLI

1. Jalankan perintah di terminal mu untuk memulai project astro.js

# buat project menggunakan npm
npm create astro@latest

kamu juga bisa menginstall menggunakan pnpm, yarn. kamu bisa mengjalankan perintah create astro di terminal. ikuti perintah dari terminal dan jika kamu skip bagian npm install kamu juga masih bisa menginstall nya, tapi pastikan untuk menginstallnya.

Setelah semua sudah di jalankan, maka kamu sudah bisa memulai astro dev server dan mulai coding!.

Starter Template

Kalau kamu tidak mau ribet dan ingin praktis, kamu bisa menggunakan template yang disediakan oleh astro, lihat disini

Lakukan ini jika kamu ingin menggunakan template dari astro ataupun github repository:

# create a new project with an official example
npm create astro@latest -- --template <example-name>

# create a new project based on a GitHub repository’s main branch
npm create astro@latest -- --template <github-username>/<github-repo>

Dan akhir nya kamu udah bisa mulai melakukan astro development server

npm run dev

Astro bakal memulai server project mu di http://localhost:4321/ kunjungi link itu dan mulai coding !!