สถาปัตยกรรมแบบเกาะ

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

ลด JS ทั้งหมดด้วยการทำ Hydration เฉพาะส่วนที่ต้องโต้ตอบ ทำให้ TTI เร็วขึ้น

Astro ทำให้รูปแบบนี้ได้รับความนิยม ส่วน SvelteKit สามารถนำมาใช้ได้ผ่านการสร้างล่วงหน้าและการทำ Hydration แบบเลือกเฉพาะส่วน

สร้างหน้าล่วงหน้าและใช้ ssr = true จากนั้นเลื่อนการโต้ตอบออกไปด้วยการโหลดคอมโพเนนต์เฉพาะรายการเมื่อจำเป็น

SvelteKit แบ่งโค้ดตามเส้นทาง หากต้องการแบ่งเพิ่มเติม ให้ใช้ import() แบบไดนามิกภายในหน้าเว็บ

หน้าการตลาดอาจเป็นแบบคงที่ ส่วนฟอร์ม "สมัครรับข้อมูล" อาจเป็นเกาะที่ทำ Hydration แบบไดนามิก

ลดข้อมูล JS ทำให้การแสดงผลเนื้อหาขนาดใหญ่ที่สุดเร็วขึ้น และปรับปรุงตัวชี้วัดประสิทธิภาพเว็บหลัก

สถาปัตยกรรมมีความซับซ้อนมากขึ้น การผสมส่วนคงที่และไดนามิกต้องวางแผนอย่างรอบคอบ

ผสานสถาปัตยกรรมแบบเกาะเข้ากับ SSR บนเอดจ์ เพื่อให้การแสดงผลครั้งแรกทั่วโลกเป็นไปอย่างรวดเร็ว พร้อมใช้ JS เพียงเล็กน้อย

Astro สร้างขึ้นโดยเฉพาะสำหรับสถาปัตยกรรมแบบเกาะ ส่วนการทำงานต่อเนื่องของ Qwik ก็ต่อยอดแนวคิดนี้ให้ก้าวหน้ายิ่งขึ้น

เว็บไซต์ที่มีเนื้อหาจำนวนมากและมีการโต้ตอบเป็นครั้งคราว เช่น บล็อก เอกสาร และเว็บไซต์อีคอมเมิร์ซ

สถาปัตยกรรมแบบเกาะผสาน HTML แบบสแตติกเข้ากับ Component แบบโต้ตอบที่เลือกทำให้พร้อมใช้งานเป็นบางส่วน เพื่อใช้ JS เพียงเล็กน้อยและทำให้ TTI รวดเร็ว