Penyiapan Astro dan React Islands

Inisialisasi proyek Astro menggunakan npx create astro@latest, yang menjalankan panduan interaktif untuk memilih templat, pengaturan TypeScript, dan pengelola paket. Astro mendukung beberapa proyek awal, termasuk templat kosong, templat blog, dan templat dokumentasi.

Integrasi Astro menambahkan dukungan kerangka kerja ke sebuah proyek. Menjalankan npx astro add react secara otomatis memasang @astrojs/react, react, dan react-dom, serta memperbarui astro.config.mjs untuk menyertakan integrasi React. Seluruh penyiapan selesai dengan satu perintah.

Berkas .astro adalah format komponen Astro. Berkas ini terdiri atas bagian front matter (JavaScript di antara pembatas ---) dan bagian templat. Secara bawaan, berkas Astro menghasilkan HTML statis — tidak ada JavaScript yang dikirim ke peramban kecuali Anda menambahkan direktif klien secara eksplisit.

Mengimpor komponen React ke dalam berkas Astro menggunakan sintaks modul ES standar: import Counter from './Counter.jsx'. Tanpa direktif klien, Astro merender komponen React di server menjadi HTML statis dan mengirimkan HTML tersebut ke peramban — tidak ada JavaScript yang dikirim untuk komponen tersebut.

Menambahkan client:visible ke tag komponen dalam templat Astro mengubahnya menjadi sebuah pulau: <Counter client:visible />. Astro kini mengirimkan JavaScript milik Counter, menghidrasinya saat komponen tersebut terlihat ketika digulir, dan menjadikannya interaktif. Tanpa direktif tersebut, komponen itu berupa HTML statis.

Komponen React yang digunakan sebagai pulau Astro ditulis dengan React standar — komponen tersebut menggunakan kait, status, efek, dan pustaka React apa pun. Tidak ada API khusus Astro di dalam komponen React itu sendiri. Batas pulau ditentukan dalam templat Astro, bukan di dalam kode komponen.

Setiap instans pulau merupakan pohon React yang independen. Dua pulau Counter pada halaman yang sama tidak berbagi status. Jika Anda memerlukan status bersama, ada tiga pilihan: gabungkan keduanya menjadi satu pulau, gunakan parameter kueri URL untuk status yang dapat diserialisasi, atau gunakan pustaka status bersama seperti nanostores.

Pustaka @nanostores/react menyediakan atom ringan yang dapat diikuti oleh pulau mana pun. Satu pulau menulis ke atom penyimpanan nano, sedangkan pulau lain membacanya. Karena penyimpanan nano tidak bergantung pada kerangka kerja, pola ini juga dapat digunakan di antara pulau React dan Vue pada halaman yang sama.

Koleksi Konten Astro menyediakan cara yang aman secara tipe untuk mengelola berkas Markdown dan MDX. Tentukan skema koleksi dengan Zod, letakkan berkas Markdown di src/content/, dan Astro akan menghasilkan fungsi kueri yang sepenuhnya bertipe. Ini adalah pola standar untuk kiriman blog, dokumentasi, dan halaman produk.

Menjalankan astro build menghasilkan folder dist/ yang berisi berkas HTML statis. Untuk setiap halaman, Astro menghasilkan berkas HTML dengan konten yang dirender di server dan hanya bundel JavaScript yang diperlukan oleh pulau-pulau di halaman tersebut. Halaman tanpa pulau tidak menghasilkan JavaScript sama sekali.

Hasil statis dapat diterapkan ke CDN mana pun (Netlify, Vercel, Cloudflare Pages) tanpa server. Untuk kebutuhan perenderan sisi server (rute dinamis, titik akhir API), Astro mendukung adaptor SSR untuk Node.js, Vercel Edge, Cloudflare Workers, dan Deno. Pulau bekerja dengan cara yang sama dalam kedua mode tersebut.

Perubahan minimum apa yang diperlukan pada komponen React yang diimpor dalam templat Astro agar komponen tersebut menjadi interaktif di klien?

Siapkan Astro dengan React menggunakan npx astro add react. Berkas Astro bersifat statis secara bawaan; menambahkan direktif client: ke tag komponen React mengubahnya menjadi pulau yang dihidrasi. Komponen React tetap berupa React standar tanpa API khusus Astro. Status terpisah pada setiap pulau; nanostores memungkinkan komunikasi antar-pulau. Hasil pembangunan berupa HTML statis dengan hanya JavaScript pulau yang diperlukan.