React Academy · Pelajaran

Pola Arsitektur Pulau

Kirim sebagian besar HTML statis dan hidrasi hanya widget interaktif untuk waktu interaktif yang optimal.

Pola Arsitektur Pulau adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Apa Itu Arsitektur Pulau

Arsitektur Pulau mengirimkan sebagian besar HTML statis dengan bagian interaktif kecil yang dihidrasi secara mandiri (pulau). Sebagian besar halaman tidak menggunakan JS; hanya widget yang memerlukan interaktivitas yang menjadi pulau React.

Masalah yang Diatasinya

SSR tradisional menghidrasi seluruh halaman meskipun 90% bagiannya adalah konten statis (header, teks, gambar). Arsitektur Pulau hanya menghidrasi bagian interaktif, sehingga secara drastis mengurangi JavaScript yang dikirim ke peramban.

Konsep Inti

Bayangkan halaman sebagai lautan HTML statis dengan pulau-pulau interaktivitas yang mengapung di dalamnya. Setiap pulau dihidrasi secara mandiri dan dapat menggunakan kerangka kerja yang berbeda jika diperlukan.

Astro sebagai Kerangka Kerja Pulau

Astro memopulerkan arsitektur pulau. Secara bawaan, komponen tidak menggunakan JS. Tambahkan direktif client:* untuk memilih hidrasi.

---
import Header from './Header.astro';      // static — 0 JS
import SearchBar from './SearchBar.jsx';  // island — hydrated
import Footer from './Footer.astro';      // static — 0 JS
---
<Header />
<SearchBar client:load />   <!-- hydrate immediately -->
<SearchBar client:idle />   <!-- hydrate when browser is idle -->
<SearchBar client:visible /> <!-- hydrate when scrolled into view -->
<Footer />

Direktif Hidrasi

Kerangka kerja pulau menyediakan waktu hidrasi yang terperinci: client:load (segera), client:idle (requestIdleCallback), client:visible (IntersectionObserver), client:media (kueri media CSS).

Menerapkan Pulau di Next.js

Perute Aplikasi Next.js mendekati pola pulau melalui pemisahan Komponen Server/Klien. Komponen Server = statis; Komponen Klien = pulau.

// Most of the page is a Server Component (no JS sent)
export default async function ProductPage() {
  const product = await getProduct();
  return (
    <article>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* Only the interactive button is a Client Component island */}
      <AddToCartButton product={product} />
    </article>
  );
}

Pulau Manual dengan React lazy

Tanpa kerangka kerja khusus, Anda dapat membuat pola pulau dengan memuat komponen interaktif secara tertunda hanya setelah halaman selesai dimuat.

const HeavyWidget = lazy(() => import('./HeavyWidget'));

function Page() {
  const [show, setShow] = useState(false);
  const containerRef = useRef(null);

  useEffect(() => {
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) setShow(true);
    });
    obs.observe(containerRef.current);
    return () => obs.disconnect();
  }, []);

  return (
    <div ref={containerRef}>
      {show && <Suspense fallback={null}><HeavyWidget /></Suspense>}
    </div>
  );
}

Kompromi

Manfaat: JS minimal, TTI cepat, konten statis di-cache secara agresif. Biaya: pulau tidak dapat dengan mudah berbagi status (konteks JS terpisah), dan arsitekturnya lebih rumit daripada SPA standar.

Berbagi Status Antar-Pulau

Gunakan mekanisme bawaan peramban (peristiwa khusus, URL, localStorage) atau penyimpanan bersama yang kecil dan tunggal untuk berkomunikasi antar-pulau yang independen.

// Shared nano-store (nanostores library works well with Astro):
import { atom } from 'nanostores';
export const cartCount = atom(0);

// Island A:
cartCount.set(cartCount.get() + 1);
// Island B subscribes:
cartCount.subscribe(count => setDisplay(count));

Kapan Menggunakan Arsitektur Pulau

Paling sesuai untuk: situs yang kaya konten (blog, perdagangan elektronik, pemasaran) yang sebagian besar kontennya statis dan hanya beberapa komponen yang memerlukan interaktivitas (pencarian, keranjang, formulir).

Pulau vs SSR vs SPA

SPA: semua JS, menghidrasi semuanya. SSR: server merender dan menghidrasi semuanya. Pulau: server merender semuanya, tetapi hanya menghidrasi widget interaktif. Pulau memberikan kinerja terbaik untuk situs yang kaya konten.

Pemeriksaan Singkat

Apa manfaat kinerja utama dari pola Arsitektur Pulau?

Ringkasan

Arsitektur Pulau mempertahankan sebagian besar HTML sebagai statis (tanpa JS) dan hanya menghidrasi widget interaktif. Gunakan Astro sebagai kerangka kerja pulau khusus, atau dekati pola tersebut dengan Komponen Server/Klien Next.js. Lakukan hidrasi secara tertunda dengan client:visible/IntersectionObserver untuk pulau yang tidak kritis.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pola Arsitektur Pulau” gratis?

Ya — teks lengkap “Pola Arsitektur Pulau” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pola Arsitektur Pulau”?

Kirim sebagian besar HTML statis dan hidrasi hanya widget interaktif untuk waktu interaktif yang optimal. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Pola Arsitektur Pulau” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke React Academy