RSC untuk pengembang Astro

 (overreacted.io)
2 poin oleh GN⁺ 2025-05-10 | 3 komentar | Bagikan ke WhatsApp
  • Astro dan React Server Components(RSC) sama-sama mengimplementasikan pemisahan kode server dan klien dengan cara yang mirip
  • Di Astro, Astro Component dan Client Island masing-masing membagi peran fungsional
  • RSC membagi konsep yang sama menjadi Server Component dan Client Component, dengan batas yang ditentukan melalui direktif 'use client'
  • Dibandingkan Astro, RSC lebih fleksibel dalam menyusun UI interaktif dan berbagi kode
  • Kedua model sama-sama memiliki struktur aliran data satu arah dari server ke klien

Pengenalan dan konsep dasar

  • Astro menyediakan dua tipe komponen utama: Astro Component dan Client Island
  • Astro Component menggunakan ekstensi .astro, hanya berjalan di server atau saat build time, dan dapat melakukan hal-hal yang tidak bisa dilakukan di klien seperti mengakses sistem file, melakukan query DB, atau memanggil layanan internal
  • Client Island adalah komponen untuk React, Vue, dan lainnya, yang berjalan di browser dan menangani bagian interaksi pengguna
  • Dari dalam Astro Component, kita bisa merender Client Island, tetapi Client Island tidak bisa memanggil Astro Component
  • Struktur ini menjamin sifat satu arah bahwa data selalu hanya mengalir dari server ke klien

Contoh kode dan pemisahan peran

  • Pada contoh kode, PostPreview.astro membaca file di server lalu mengambil judul, kemudian meneruskan data tersebut ke Client Island
  • LikeButton ditulis dengan React, dan setelah browser dimuat, komponen ini menangani perubahan state serta event klik pengguna
  • Astro Component dan Client Island berjalan di dua dunia yang berbeda, dan pengiriman data juga hanya berlangsung ke bawah dari Astro Component

Perbandingan dengan React Server Components(RSC)

  • Di RSC, seperti Astro, ada pemisahan antara server component (Server Component) dan client component (Client Component)
  • Dalam React Server Component, server component dideklarasikan sebagai fungsi JavaScript, dan awal kode klien ditandai dengan jelas melalui direktif 'use client'
  • Di RSC, file komponen yang sama bisa berperan sebagai server maupun klien; tidak seperti Astro yang memisahkan lewat ekstensi file atau pemisahan terpisah, batas dapat dipindahkan hanya dengan deklarasi 'use client' sesuai kebutuhan
  • Jika komponen menggunakan fitur khusus klien (misalnya useState) atau fitur khusus server (seperti akses DB), maka build error akan muncul saat dipakai di lingkungan yang salah sehingga memberi umpan balik yang jelas

Perbedaan visual/struktural Astro dan RSC

  • Astro memiliki batas yang jelas lewat pemisahan file .astro dan file JS/TS
  • Karena pada dasarnya semuanya adalah React di RSC, kemampuan berbagi kode dan fleksibilitasnya jauh lebih unggul
  • Misalnya, komponen netral (seperti parser Markdown) yang tidak memakai state atau fitur server dapat digunakan di kedua sisi
  • Di RSC, jalur import secara otomatis menentukan komponen tersebut akan berjalan di dunia yang mana

Kelebihan dan keterbatasan model RSC

  • Keunggulan RSC ada pada reuse kode dan fleksibilitas perpindahan peran
    • Komponen apa pun bisa dengan mudah memindahkan batas hanya dengan deklarasi 'use client' sesuai kebutuhan
    • Di Astro, ketika sifat statis/dinamis UI berubah, konversi kode bisa merepotkan, sedangkan RSC dapat menyelesaikannya dengan sederhana
  • Kekurangan RSC adalah tingkat kesulitan belajar yang lebih tinggi
    • Pengembang harus terus memikirkan sedang berada di “dunia” yang mana, tetapi saat melakukan kesalahan, build error memberi umpan balik cepat
  • Di Astro, struktur menjadi lebih kompleks ketika bagian UI yang dinamis makin banyak, sedangkan di RSC seluruh React tree terintegrasi sehingga state dan pengiriman konteks (Context) mengalir secara alami

Astro yang berpusat pada HTML dan RSC yang berpusat pada React tree

  • Hasil akhir Astro adalah HTML, sehingga setiap perpindahan halaman memuat ulang keseluruhan halaman dan tidak memberikan pengalaman SPA sepenuhnya
  • Hasil akhir RSC adalah React tree (awalnya HTML, lalu saat navigasi dikirim sebagai JSON, dan sebagainya)
    • Karena itu, RSC dapat menggabungkan kelebihan SPA dan MPA
  • Refresh parsial dimungkinkan dengan memperbarui langsung hanya sebagian UI dari server, sehingga lebih mudah menerima data dinamis dan mempertahankan state klien

Dukungan fitur React tingkat lanjut

  • Dengan struktur tree campuran server-klien, fitur React yang lebih maju (misalnya <Suspense>, view transition, dan lain-lain) didukung secara alami dan terintegrasi
  • Status loading yang ditangani secara deklaratif di klien, serta penundaan font/gambar/JavaScript/style juga dapat dikelola
  • Semua fitur React bekerja end-to-end tanpa terhalang batas server-klien

Posisi RSC dan Astro

  • Astro adalah framework yang lengkap, sedangkan RSC lebih dekat ke building block atau standar untuk framework
  • Implementasi resmi RSC mencakup Next.js App Router dan Parcel RSC

Kesimpulan dan rekomendasi

  • Pengalaman pengembang (DX) RSC masih terasa kasar, tetapi tetap layak dipelajari
  • Jika belum pernah mencoba Astro, itu direkomendasikan; bagi pengembang yang merasa RSC sulit, Astro bisa menjadi jalur masuk yang lebih mulus
  • Bagi pengembang yang selama ini hanya memakai React sisi klien, Astro juga bisa memberi pengalaman memecahkan masalah yang tak terduga

Bacaan terkait

3 komentar

 
hakoiko 2025-05-13

Saat ini saya sedang merefaktor aplikasi React lama ke Astro.
Di artikel ini ditekankan tentang "konteks yang terintegrasi". "Konteks yang terintegrasi" memang membantu membangun layanan dengan cepat, tetapi kita perlu tahu bahwa pada akhirnya itu bisa menjadi utang teknis.
Dari sudut pandang pemeliharaan jangka panjang layanan, "keterikatan erat yang terintegrasi" lebih buruk dibanding "keterikatan longgar antar modul yang independen".
Dan Astro adalah framework yang paling fleksibel untuk itu.
 
GN⁺ 2025-05-10
Komentar Hacker News
  • Satu-satunya alasan saya akan memakai RSC dibanding Astro adalah karena context bisa dibagikan antar island, selain itu tidak ada keunggulan khusus, dan meski ini hal kecil, saya berharap tulisan ini menyebut dan menjelaskan dengan jelas konsep "code fence" di Astro, ide ini memisahkan batas antara server dan client jauh lebih jelas daripada 'use client' di React
    • Menurut saya code fence tidak benar-benar menunjukkan batas, kode di bawah fence juga tetap harus dijalankan di server, kalau tidak, komponen Astro tidak akan bisa dirujuk dari sana, sejauh yang saya pahami fence hanya berarti pembedaan antara "binding vs template", bukan "server vs client"
    • Berbagi context antar island itu sangat mudah di Astro, bisa lihat tautan ini https://docs.astro.build/en/recipes/sharing-state-islands/
  • Astro adalah framework web untuk situs yang berfokus pada konten, https://github.com/withastro/astro
    • Orang-orang yang dulu memakai Gatsby pada akhirnya akan selamanya mengingat hari ketika mereka terbebas dari pipeline pemrosesan gambar rapuh yang terhubung lewat GraphQL, (mereka sedang duduk di depan komputer saat itu), saya tidak punya bukti, tapi fakta ilmiah mengatakan net promoter score Astro berisi lima angka 9
    • Astro sangat bagus, sudah jadi pilihan default saya untuk SSG sejak beberapa tahun lalu, dan sekarang saya juga serius mempertimbangkan Astro untuk membuat aplikasi, ada yang punya pengalaman memakai Astro untuk app?, saya berencana merender hanya HTML berbasis island dengan Astro dan memakai backend non-JS
    • "framework web untuk situs yang berfokus pada konten", jadi apakah ada juga situs yang digerakkan bukan oleh konten melainkan oleh generator angka acak?
  • Saya benar-benar sangat suka Astro, sudah memakainya sejak rilis pertama, situs pribadi saya dan landing page produk pertama saya semua dibuat dengan Astro, build-nya cepat, bisa deploy tanpa JS, dan bisa memakai library frontend apa pun, jadi menurut saya ini framework terbaik