Corak Seni Bina Pulau
Hantar kebanyakannya HTML statik dan hidratkan hanya widget interaktif untuk Masa ke Interaktif yang optimum.
Corak Seni Bina Pulau ialah pelajaran React Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Academy merangkumi sejumlah 4 pelajaran.
Apakah Seni Bina Pulau?
Seni Bina Pulau menghantar kebanyakannya HTML statik dengan bahagian interaktif kecil yang dihidrasi secara bebas (pulau). Kebanyakan halaman tidak menggunakan JS; hanya widjet yang memerlukan interaktiviti menjadi pulau React.
Masalah yang Diselesaikannya
SSR tradisional menghidrasi seluruh halaman walaupun 90% daripadanya ialah kandungan statik (pengepala, teks, imej). Pulau hanya menghidrasi bahagian interaktif, lalu mengurangkan JavaScript yang dihantar kepada pelayar dengan ketara.
Konsep Teras
Bayangkan halaman sebagai lautan HTML statik dengan pulau interaktiviti yang terapung di dalamnya. Setiap pulau dihidrasi secara bebas dan boleh menggunakan rangka kerja yang berbeza jika diperlukan.
Astro sebagai Rangka Kerja Pulau
Astro mempopularkan seni bina pulau. Komponen secara lalai tidak menggunakan JS. Tambahkan arahan 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 />Arahan Hidrasi
Rangka kerja pulau menawarkan masa hidrasi yang terperinci: client:load (serta-merta), client:idle (requestIdleCallback), client:visible (IntersectionObserver), client:media (pertanyaan media CSS).
Melaksanakan Pulau dalam Next.js
Penghala Aplikasi Next.js menghampiri corak pulau melalui pemisahan Komponen Pelayan/Klien. Komponen Pelayan = statik; 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 Pemuatan Malas React
Tanpa rangka kerja khusus, capai corak pulau dengan memuatkan komponen interaktif secara malas hanya selepas halaman dimuatkan.
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>
);
}Pertukaran
Manfaat: JS minimum, TTI pantas, kandungan statik disimpan secara agresif dalam tembolok. Kos: pulau tidak boleh berkongsi keadaan dengan mudah (konteks JS berasingan), dan seni binanya lebih kompleks berbanding SPA standard.
Berkongsi Keadaan antara Pulau
Gunakan mekanisme natif pelayar (peristiwa tersuai, URL, localStorage) atau singleton stor kongsi yang kecil untuk berkomunikasi antara pulau bebas.
// 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));Bila Hendak Menggunakan Seni Bina Pulau
Paling sesuai untuk: tapak yang kaya dengan kandungan (blog, e-dagang, pemasaran) apabila kebanyakan kandungannya statik dan hanya beberapa komponen memerlukan interaktiviti (carian, troli, borang).
Pulau berbanding SSR berbanding SPA
SPA: semua JS, menghidrasi segala-galanya. SSR: pelayan memaparkan dan menghidrasi segala-galanya. Pulau: pelayan memaparkan segala-galanya, tetapi hanya menghidrasi widjet interaktif. Pulau memberikan prestasi terbaik untuk tapak berasaskan kandungan.
Semakan Pantas
Apakah manfaat prestasi utama corak Seni Bina Pulau?
Ringkasan
Seni Bina Pulau mengekalkan kebanyakan HTML sebagai statik (sifar JS) dan hanya menghidrasi widjet interaktif. Gunakan Astro untuk rangka kerja pulau khusus, atau hampiri corak ini dengan Komponen Pelayan/Klien Next.js. Lakukan hidrasi secara malas dengan client:visible/IntersectionObserver untuk pulau yang tidak kritikal.
Pelajari React dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 88
- Pelajaran
- 324
Soalan Lazim
Adakah pelajaran “Corak Seni Bina Pulau” percuma?
Ya — teks penuh “Corak Seni Bina Pulau” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus React Academy, tingkat taraf kepada CoddyKit PRO. Kursus React Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Corak Seni Bina Pulau”?
Hantar kebanyakannya HTML statik dan hidratkan hanya widget interaktif untuk Masa ke Interaktif yang optimum. Anda berlatih React Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan React Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran React Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Corak Seni Bina Pulau” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Academy ini?
Ya. Setiap pelajaran React Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Cara SSR React Berfungsi di Sebalik Tabir
- Ralat Hidrasi: Punca & Penyelesaian
- Hidrasi Terpilih & Penstriman HTML
- Corak Seni Bina Pulau