React Academy · บทเรียน

รูปแบบสถาปัตยกรรม Islands

ส่ง HTML ที่ส่วนใหญ่เป็นสถิต และทำไฮเดรชันเฉพาะวิดเจ็ตที่โต้ตอบได้เพื่อให้พร้อมโต้ตอบได้อย่างเหมาะสม

รูปแบบสถาปัตยกรรม Islands เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

สถาปัตยกรรมแบบเกาะคืออะไร

สถาปัตยกรรมแบบเกาะจะส่ง HTML แบบคงที่เป็นส่วนใหญ่ พร้อมส่วนโต้ตอบขนาดเล็กที่ไฮเดรตแยกจากกันอย่างอิสระ หรือที่เรียกว่าเกาะ หน้าเว็บส่วนใหญ่ไม่มี JS มีเพียงวิดเจ็ตที่ต้องการการโต้ตอบเท่านั้นที่กลายเป็นเกาะของ React

ปัญหาที่สถาปัตยกรรมนี้แก้ไข

SSR แบบดั้งเดิมจะไฮเดรตทั้งหน้า แม้ว่า 90% ของหน้าจะเป็นเนื้อหาคงที่ เช่น ส่วนหัว ข้อความ และรูปภาพ เกาะจะไฮเดรตเฉพาะส่วนที่โต้ตอบได้ จึงลด JavaScript ที่ส่งไปยังเบราว์เซอร์ลงอย่างมาก

แนวคิดหลัก

ลองนึกภาพหน้าเว็บเป็นทะเลของ HTML แบบคงที่ ซึ่งมีเกาะแห่งการโต้ตอบลอยอยู่ แต่ละเกาะจะไฮเดรตอย่างอิสระ และสามารถใช้เฟรมเวิร์กที่แตกต่างกันได้หากจำเป็น

Astro ในฐานะเฟรมเวิร์กแบบเกาะ

Astro ทำให้สถาปัตยกรรมแบบเกาะได้รับความนิยม คอมโพเนนต์จะไม่มี JS โดยค่าเริ่มต้น หากต้องการเปิดใช้ไฮเดรชัน ให้เพิ่มคำสั่งกำกับ client:*

---
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 />

คำสั่งกำกับไฮเดรชัน

เฟรมเวิร์กแบบเกาะมีช่วงเวลาการไฮเดรตที่กำหนดได้อย่างละเอียด ได้แก่ client:load (ทันที), client:idle (requestIdleCallback), client:visible (IntersectionObserver) และ client:media (คำค้นสื่อของ CSS)

การนำเกาะมาใช้ใน Next.js

เราเตอร์แอปของ Next.js จำลองแนวคิดเกาะผ่านการแบ่งคอมโพเนนต์ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ คอมโพเนนต์ฝั่งเซิร์ฟเวอร์ = เนื้อหาคงที่ ส่วนคอมโพเนนต์ฝั่งไคลเอ็นต์ = เกาะ

// 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>
  );
}

สร้างเกาะด้วยการโหลดแบบขี้เกียจของ React ด้วยตนเอง

หากไม่มีเฟรมเวิร์กเฉพาะ คุณสามารถสร้างเกาะได้โดยโหลดคอมโพเนนต์ที่โต้ตอบได้แบบขี้เกียจหลังจากโหลดหน้าเสร็จแล้วเท่านั้น

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>
  );
}

ข้อแลกเปลี่ยน

ประโยชน์: ใช้ JS น้อยที่สุด, TTI เร็ว และแคชเนื้อหาคงที่ได้อย่างเข้มข้น ต้นทุน: เกาะไม่สามารถใช้สถานะร่วมกันได้ง่าย เนื่องจากอยู่ในบริบท JS แยกกัน และมีสถาปัตยกรรมซับซ้อนกว่า SPA มาตรฐาน

การใช้สถานะร่วมกันระหว่างเกาะ

ใช้กลไกที่มีในเบราว์เซอร์ เช่น เหตุการณ์กำหนดเอง ที่อยู่เว็บ และ localStorage หรือใช้ซิงเกิลตันของคลังสถานะร่วมขนาดเล็กเพื่อสื่อสารระหว่างเกาะที่เป็นอิสระต่อกัน

// 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));

ควรใช้สถาปัตยกรรมแบบเกาะเมื่อใด

เหมาะที่สุดสำหรับ: เว็บไซต์ที่มีเนื้อหาจำนวนมาก เช่น บล็อก เว็บไซต์อีคอมเมิร์ซ และเว็บไซต์การตลาด ซึ่งเนื้อหาส่วนใหญ่เป็นเนื้อหาคงที่ และมีเพียงไม่กี่คอมโพเนนต์ที่ต้องการการโต้ตอบ เช่น การค้นหา รถเข็น และแบบฟอร์ม

เกาะ เทียบกับ SSR และ SPA

SPA: ใช้ JS ทั้งหมดและไฮเดรตทุกส่วน SSR: เซิร์ฟเวอร์เรนเดอร์และไฮเดรตทุกส่วน เกาะ: เซิร์ฟเวอร์เรนเดอร์ทุกส่วน แต่ไฮเดรตเฉพาะวิดเจ็ตที่โต้ตอบได้ เกาะมีประสิทธิภาพเหนือกว่าสำหรับเว็บไซต์ที่เน้นเนื้อหา

ตรวจสอบความเข้าใจ

ประโยชน์ด้านประสิทธิภาพหลักของรูปแบบสถาปัตยกรรมแบบเกาะคืออะไร

สรุปทบทวน

สถาปัตยกรรมแบบเกาะทำให้ HTML ส่วนใหญ่เป็นเนื้อหาคงที่ ไม่มี JS และไฮเดรตเฉพาะวิดเจ็ตที่โต้ตอบได้ ใช้ Astro หากต้องการเฟรมเวิร์กแบบเกาะโดยเฉพาะ หรือจำลองแนวคิดนี้ด้วยคอมโพเนนต์ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ของ Next.js สำหรับเกาะที่ไม่สำคัญ ให้ไฮเดรตแบบขี้เกียจด้วย client:visible/IntersectionObserver

คำถามที่พบบ่อย

บทเรียน “รูปแบบสถาปัตยกรรม Islands” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “รูปแบบสถาปัตยกรรม Islands” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบสถาปัตยกรรม Islands”

ส่ง HTML ที่ส่วนใหญ่เป็นสถิต และทำไฮเดรชันเฉพาะวิดเจ็ตที่โต้ตอบได้เพื่อให้พร้อมโต้ตอบได้อย่างเหมาะสม คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “รูปแบบสถาปัตยกรรม Islands” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม

ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ React Academy