Update Astro 4.15: Bikin Web Company Profile Super Cepat

Membangun website company profile yang cepat dan responsif menjadi salah satu kebutuhan penting bagi bisnis saat ini. Pengunjung biasanya mengharapkan halaman website dapat dibuka dengan cepat, terutama ketika mengaksesnya melalui perangkat mobile. Karena itu, pemilihan framework dan cara website mengelola JavaScript dapat berpengaruh terhadap pengalaman pengguna serta performa halaman di mesin pencari. Salah satu framework yang banyak digunakan untuk kebutuhan website modern adalah Astro.

Pada Astro 4.15, terdapat sejumlah pembaruan yang menarik bagi developer, mulai dari Astro Actions yang semakin matang, peningkatan pada client:idle, hingga helper untuk View Transitions. Fitur-fitur tersebut dapat dimanfaatkan untuk membangun website company profile yang tetap interaktif tanpa harus membebani browser dengan JavaScript yang tidak diperlukan. Lantas, apa saja perubahan di Astro 4.15 dan bagaimana penerapannya untuk membuat website company profile yang cepat dan ringan?

Apa Itu Astro 4.15?

Astro 4.15 merupakan salah satu pembaruan framework Astro yang dirilis pada 29 Agustus 2024. Versi ini membawa beberapa fitur baru yang berhubungan dengan pengembangan frontend dan backend, termasuk Astro Actions yang keluar dari status eksperimental, dukungan remote libSQL untuk Astro DB, opsi timeout pada client:idle, serta helper untuk melakukan kustomisasi View Transitions.

Bagi developer yang membangun website company profile, pembaruan ini cukup menarik karena sebagian besar kebutuhan website perusahaan sebenarnya tidak memerlukan aplikasi JavaScript yang sangat kompleks. Halaman seperti beranda, profil perusahaan, layanan, portofolio, artikel, dan halaman kontak dapat dibuat dengan pendekatan yang lebih ringan.

Astro sendiri menggunakan konsep Islands Architecture. Secara default, komponen Astro dapat dirender menjadi HTML dan CSS tanpa mengirim JavaScript client-side yang tidak diperlukan. JavaScript hanya digunakan ketika sebuah komponen memang membutuhkan interaksi di browser.

Mengapa Astro Cocok untuk Website Company Profile?

Website company profile umumnya lebih banyak berisi konten dibandingkan interaksi kompleks. Misalnya, sebuah website perusahaan dapat memiliki halaman:

• Beranda
• Tentang perusahaan
• Layanan
• Produk
• Portofolio
• Blog
• FAQ
• Kontak

Tidak semua bagian tersebut membutuhkan JavaScript. Hero section, teks perusahaan, daftar layanan, portofolio, dan artikel pada dasarnya dapat ditampilkan sebagai HTML.

Di sinilah pendekatan Astro menjadi menarik. Komponen UI tidak otomatis mendapatkan JavaScript di browser kecuali developer memberikan client:* directive. Dengan begitu, developer dapat menentukan komponen mana yang benar-benar membutuhkan interaktivitas.

Contohnya, website perusahaan mungkin memiliki slider testimonial. Slider tersebut membutuhkan JavaScript, tetapi bagian teks profil perusahaan tidak.

Dengan pendekatan ini, developer tidak perlu membuat seluruh website menjadi aplikasi JavaScript besar hanya karena ada beberapa komponen interaktif.

Astro Islands Membantu Mengurangi JavaScript

Salah satu konsep penting dalam Astro adalah Islands Architecture. Konsep ini memungkinkan sebagian besar halaman tetap berupa HTML statis, sedangkan komponen tertentu dapat menjadi island yang menjalankan JavaScript ketika memang dibutuhkan.

Misalnya, sebuah website company profile memiliki komponen seperti:

<HeroSection />
<CompanyProfile />
<Services />
<TestimonialSlider client:visible />
<ContactForm client:load />

HeroSection, CompanyProfile, dan Services dapat tetap ringan jika tidak membutuhkan JavaScript. Sementara itu, TestimonialSlider dan ContactForm dapat dibuat interaktif sesuai kebutuhannya.

Astro menyediakan beberapa strategi hidrasi seperti client:load, client:idle, dan client:visible. client:load cocok untuk komponen yang harus langsung interaktif, sedangkan client:idle dan client:visible dapat digunakan untuk komponen dengan prioritas lebih rendah.

Pendekatan tersebut penting untuk company profile karena tidak semua fitur harus mendapatkan prioritas yang sama.

Update client:idle dengan Opsi Timeout

Salah satu pembaruan yang cukup relevan dari Astro 4.15 adalah adanya opsi timeout pada client:idle.

Sebelumnya, client:idle digunakan untuk menjalankan JavaScript sebuah island ketika browser sedang idle. Pada Astro 4.15, developer dapat menentukan batas waktu maksimum sebelum komponen tersebut di-hydrate.

Contohnya:

<Counter client:idle={{ timeout: 500 }} />

Pada contoh tersebut, komponen diberikan waktu tunggu maksimum 500 milidetik sebelum proses hydration dilakukan.

Fitur ini memberikan kontrol lebih besar terhadap komponen interaktif yang tidak harus aktif tepat ketika halaman pertama kali dibuka.

Bagaimana client:idle Membantu Company Profile?

Bayangkan sebuah website perusahaan memiliki fitur FAQ interaktif di bagian bawah halaman. FAQ tersebut memang membutuhkan JavaScript, tetapi pengguna tidak harus langsung berinteraksi dengannya ketika halaman pertama kali terbuka.

Developer dapat menggunakan:

<FAQ client:idle={{ timeout: 1000 }} />

Dengan strategi tersebut, JavaScript FAQ tidak perlu menjadi prioritas utama pada proses awal halaman.

Hal yang sama dapat diterapkan pada komponen seperti:

• FAQ accordion
• Testimonial slider
• Filter portofolio
• Menu tambahan
• Widget interaktif
• Komponen statistik

Namun, penggunaannya tetap harus disesuaikan dengan kebutuhan. Komponen yang sangat penting dan harus langsung bisa digunakan sebaiknya tidak dipaksakan menggunakan client:idle.

Astro Actions Resmi Stabil di Versi 4.15

Fitur besar lainnya pada Astro 4.15 adalah Astro Actions yang keluar dari status eksperimental dan menjadi fitur stabil. Astro Actions dirancang untuk membuat fungsi backend yang type-safe sekaligus mengurangi boilerplate dibandingkan pembuatan API endpoint secara manual.

Astro Actions dapat menangani beberapa kebutuhan seperti:

• Validasi input
• Pengambilan data
• Parsing JSON
• Komunikasi antara client dan server
• Penanganan error
• Pemanggilan fungsi backend secara type-safe

Dokumentasi Astro juga menjelaskan bahwa Actions menggunakan validasi berbasis Zod serta dapat dipanggil dari komponen client maupun HTML form.

Untuk company profile, fitur ini dapat berguna ketika website mulai memiliki kebutuhan interaktif seperti formulir kontak atau formulir newsletter.

Contoh Penggunaan Astro Actions untuk Form Kontak

Misalnya perusahaan mempunyai formulir:

• Nama
• Email
• Nomor telepon
• Pesan

Daripada membuat endpoint dengan banyak kode manual untuk membaca request dan memvalidasi data, developer dapat menggunakan Astro Actions.

Contoh struktur sederhananya:

import { defineAction } from 'astro:actions';
import { z } from 'astro/zod';

export const server = {
  contact: defineAction({
    input: z.object({
      name: z.string(),
      email: z.string().email(),
      message: z.string()
    }),
    handler: async (input) => {
      // Proses data kontak
      return {
        success: true
      };
    }
  })
};

Pada pendekatan ini, validasi input dapat didefinisikan melalui schema sehingga developer tidak harus menulis seluruh proses validasi secara manual. Astro Actions juga menyediakan pola penanganan error yang lebih terstruktur.

View Transitions untuk Navigasi yang Lebih Modern

Website company profile tidak harus terlihat seperti website statis lama. Astro juga memiliki fitur View Transitions yang dapat digunakan untuk membuat perpindahan halaman terasa lebih halus.

Pada Astro 4.15, built-in swap functions dari View Transitions tersedia melalui modul astro:transitions/client. Developer dapat menggunakan helper tersebut ketika membutuhkan kontrol yang lebih spesifik terhadap proses pergantian halaman.

Fitur ini berguna apabila perusahaan ingin memberikan pengalaman navigasi yang lebih modern tanpa harus mengubah seluruh website menjadi SPA.

Misalnya, halaman:

/
 /about
 /services
 /portfolio
 /contact

tetap dapat menggunakan pendekatan halaman Astro, tetapi transisi antarhalaman dapat dibuat lebih nyaman bagi pengguna.

Menggunakan View Transitions pada Company Profile

View Transitions dapat dimanfaatkan untuk website yang memiliki banyak halaman dengan navigasi antarbagian yang cukup sering.

Contohnya ketika pengunjung berpindah dari:

Beranda → Layanan → Detail Layanan → Portofolio → Kontak

Dengan transisi yang tepat, perpindahan halaman dapat terasa lebih mulus.

Namun, View Transitions sebaiknya digunakan sebagai peningkatan pengalaman pengguna, bukan sekadar menambahkan animasi sebanyak mungkin. Animasi yang terlalu banyak justru dapat mengganggu pengalaman pengguna dan menambah pekerjaan browser.

Dukungan libSQL Remote di Astro DB

Astro 4.15 juga menambahkan dukungan untuk menggunakan libSQL server sebagai remote pada Astro DB. Dengan fitur tersebut, developer dapat menggunakan server libSQL sendiri sebagai alternatif untuk Astro DB dengan Astro Studio.

Konfigurasi ini menggunakan environment variable seperti:

ASTRO_DB_REMOTE_URL
ASTRO_DB_APP_TOKEN

Fitur tersebut lebih relevan untuk website yang membutuhkan penyimpanan data dibandingkan company profile sederhana.

Contohnya, sebuah website perusahaan yang berkembang dapat mempunyai fitur:

• Formulir lead
• Data pelanggan
• Newsletter
• Permintaan penawaran
• Data portofolio
• Konten dinamis

Dengan adanya opsi database remote, arsitektur website dapat dibuat lebih fleksibel.

Cara Membuat Company Profile Cepat dengan Astro

Menggunakan Astro saja tidak otomatis membuat sebuah website menjadi cepat. Struktur halaman, ukuran gambar, JavaScript, CSS, font, hosting, dan cara mengambil data tetap berpengaruh terhadap performa.

Agar company profile benar-benar ringan, beberapa strategi dapat diterapkan.

1. Gunakan HTML untuk Konten yang Tidak Interaktif

Jangan menggunakan framework JavaScript untuk setiap bagian website.

Contohnya, bagian:

Tentang Kami
Layanan
Visi dan Misi
Portofolio
Artikel
Alamat

umumnya tidak membutuhkan JavaScript.

Biarkan bagian tersebut dirender sebagai HTML biasa.

2. Gunakan client:* Hanya Saat Diperlukan

Jika sebuah komponen tidak membutuhkan interaksi browser, tidak perlu menambahkan directive client.

Misalnya:

<CompanyProfile />

Sedangkan komponen interaktif dapat menggunakan:

<ContactForm client:load />

Dengan cara ini, developer dapat menentukan komponen mana yang mendapatkan JavaScript. Astro sendiri menggunakan pendekatan tersebut sebagai bagian dari Islands Architecture.

3. Gunakan client:visible untuk Komponen di Bawah Halaman

Komponen yang berada jauh di bawah halaman dapat menggunakan client:visible apabila memang membutuhkan JavaScript.

Contohnya:

<TestimonialSlider client:visible />

Directive ini membuat JavaScript komponen dimuat ketika komponen memasuki viewport. Dokumentasi Astro menjelaskan bahwa pendekatan ini cocok untuk elemen dengan prioritas rendah atau elemen yang berada di bagian bawah halaman.

4. Gunakan client:idle untuk Interaksi Prioritas Menengah

Jika sebuah komponen perlu menjadi interaktif tetapi tidak harus langsung aktif, client:idle dapat menjadi pilihan.

Pada Astro 4.15, penggunaannya dapat diperinci dengan timeout:

<FAQ client:idle={{ timeout: 1000 }} />

Dengan demikian, developer memiliki kontrol lebih besar terhadap kapan hydration dilakukan.

5. Optimalkan Gambar

Company profile biasanya menggunakan banyak foto seperti:

• Foto kantor
• Tim perusahaan
• Produk
• Proyek
• Dokumentasi kegiatan

Jika gambar terlalu besar, performa halaman tetap dapat terganggu meskipun framework yang digunakan ringan.

Karena itu, gambar sebaiknya dikompres dan disesuaikan dengan ukuran tampilan. Gunakan format modern apabila sesuai dengan kebutuhan dan hindari memasukkan gambar beresolusi sangat besar tanpa alasan.

6. Jangan Berlebihan Menggunakan Animasi

Animasi memang dapat membuat website terlihat modern, tetapi bukan berarti semua elemen harus dianimasikan.

Untuk company profile, animasi sederhana pada:

• Hero section
• Button
• Card
• Navigasi
• Perpindahan halaman

biasanya sudah cukup.

Fokus utama tetap pada konten, navigasi yang jelas, dan respons halaman.

Contoh Struktur Company Profile dengan Astro

Struktur proyek dapat dibuat sederhana seperti berikut:

src/
├── components/
│   ├── Header.astro
│   ├── Hero.astro
│   ├── Services.astro
│   ├── Portfolio.astro
│   ├── Testimonial.astro
│   └── ContactForm.astro
│
├── layouts/
│   └── Layout.astro
│
├── pages/
│   ├── index.astro
│   ├── about.astro
│   ├── services.astro
│   ├── portfolio.astro
│   └── contact.astro
│
└── actions/
    └── index.ts

Struktur seperti ini membuat setiap bagian website dapat dipisahkan berdasarkan fungsi.

Misalnya, Header.astro dan Hero.astro dapat dibuat sebagai komponen statis. Sementara ContactForm.astro dapat menggunakan JavaScript jika membutuhkan interaksi dengan backend.

Contoh Penerapan pada Halaman Beranda

Halaman beranda company profile dapat dirancang seperti:

---
import Header from '../components/Header.astro';
import Hero from '../components/Hero.astro';
import Services from '../components/Services.astro';
import Portfolio from '../components/Portfolio.astro';
import Testimonial from '../components/Testimonial.astro';
import ContactForm from '../components/ContactForm.astro';
---

<Header />

<main>
  <Hero />
  <Services />
  <Portfolio />
  <Testimonial client:visible />
  <ContactForm client:idle={{ timeout: 1000 }} />
</main>

Dari contoh tersebut terlihat bahwa tidak semua komponen harus mendapatkan JavaScript.

Hero, Services, dan Portfolio dapat tetap menjadi bagian halaman yang ringan. Sementara komponen yang membutuhkan interaksi dapat diberikan strategi hydration sesuai kebutuhannya.

Apakah Astro 4.15 Benar-Benar Membuat Website Super Cepat?

Istilah “super cepat” pada judul artikel sebaiknya dipahami sebagai pendekatan, bukan jaminan bahwa semua website yang menggunakan Astro 4.15 otomatis mempunyai skor performa sempurna.

Performa website tetap dipengaruhi oleh banyak faktor, termasuk:

• Ukuran gambar
• Jumlah JavaScript
• Struktur CSS
• Font
• Server atau hosting
• CDN
• Database
• API eksternal
• Script pihak ketiga
• Struktur halaman

Keunggulan Astro adalah memberikan fondasi yang mendukung pendekatan ringan. Secara default, komponen UI dapat dirender sebagai HTML dan JavaScript client-side hanya ditambahkan ketika diperlukan.

Karena itu, developer masih harus melakukan optimasi pada level implementasi.

Kapan Astro 4.15 Cocok untuk Company Profile?

Astro 4.15 cocok dipertimbangkan untuk website perusahaan yang sebagian besar berisi konten dan hanya membutuhkan beberapa fitur interaktif.

Contohnya:

Company profile

Website perusahaan dengan halaman beranda, profil, layanan, portofolio, dan kontak.

Landing page bisnis

Website promosi yang membutuhkan performa ringan dengan beberapa elemen interaktif.

Website agensi

Website agensi digital yang menampilkan layanan, portofolio, studi kasus, dan artikel.

Website produk

Website untuk memperkenalkan produk atau layanan dengan visual yang cukup banyak tetapi interaksi frontend tetap terbatas.

Blog perusahaan

Astro juga dapat digunakan untuk website yang menggabungkan company profile dengan blog atau pusat informasi.

Kapan Harus Mempertimbangkan Framework Lain?

Astro bukan berarti selalu menjadi pilihan untuk semua jenis aplikasi.

Jika sebuah proyek merupakan aplikasi web yang sangat interaktif dan sebagian besar pengalaman pengguna terjadi di browser, kebutuhan arsitekturnya bisa berbeda.

Contohnya aplikasi dengan:

• Dashboard kompleks
• Banyak state client-side
• Interaksi real-time
• Editor online
• Aplikasi SaaS yang sangat interaktif

Dalam kasus seperti itu, developer perlu mengevaluasi kebutuhan aplikasi secara keseluruhan, bukan hanya mengejar ukuran JavaScript awal.

Untuk website yang dominan berupa konten seperti company profile, pendekatan Astro Islands dapat memberikan keuntungan karena bagian yang tidak membutuhkan interaktivitas tidak harus membawa JavaScript client-side.