สถาปัตยกรรมแบบเกาะ: การเติมข้อมูลแบบเลือกเฉพาะ

สถาปัตยกรรมเกาะ ซึ่ง Jason Miller บัญญัติขึ้นในปี 2020 มองหน้าเว็บเป็น HTML แบบคงที่เกือบทั้งหมด โดยมี "เกาะ" ของการโต้ตอบที่แยกจากกันฝังอยู่ภายใน มหาสมุทร HTML แบบคงที่นี้จะถูกส่งไปยังเบราว์เซอร์ตามเดิม มีเพียงเกาะแบบโต้ตอบเท่านั้นที่ดาวน์โหลดและเรียกใช้ JavaScript ทำให้ปริมาณ JavaScript แปรผันตามการโต้ตอบที่มีอยู่จริง

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

ในหน้าบทความบล็อกที่ใช้สถาปัตยกรรมเกาะ ปริมาณ JavaScript อาจมีเพียง 5kb สำหรับเกาะปุ่มถูกใจหนึ่งปุ่ม หน้าเดียวกันที่สร้างเป็น React SPA อาจส่ง JavaScript ขนาดมากกว่า 200kb เพื่อทำให้ทั้งหน้าโต้ตอบได้ แนวทางสถาปัตยกรรมเกาะทำให้ปริมาณ JavaScript แปรผันตามการโต้ตอบ ไม่ใช่ตามขนาดหน้า

Astro ซึ่งเป็นเฟรมเวิร์กชั้นนำสำหรับสถาปัตยกรรมเกาะ รองรับเกาะที่สร้างด้วยเฟรมเวิร์กต่างชนิดกันบนหน้าเดียวกัน คุณสามารถมีเกาะ React อยู่ถัดจากเกาะ Vue และถัดจากเกาะ JavaScript แบบไม่ใช้เฟรมเวิร์กได้ แต่ละเกาะจะถูกรวมเป็นชุดแยกกัน ผู้ใช้จึงดาวน์โหลดเฉพาะโค้ดของเฟรมเวิร์กที่เกาะซึ่งมองเห็นได้ใช้งาน

คำสั่ง client:load จะทำให้เกาะโต้ตอบได้ทันทีเมื่อโหลดหน้า ใช้คำสั่งนี้กับเกาะที่มองเห็นและโต้ตอบได้ทันที เช่น เมนูนำทางหรือส่วนเด่นของหน้าที่มีช่องป้อนข้อมูลค้นหา นี่เป็นกลยุทธ์การทำให้โต้ตอบได้ที่มีลำดับความสำคัญสูงสุด

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

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

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

สถาปัตยกรรมเกาะแก้ปัญหาการทำให้ทั้งหน้าโต้ตอบได้โดยทำให้แน่ใจว่า JavaScript จะโหลดและทำงานเฉพาะกับองค์ประกอบที่โต้ตอบได้จริงเท่านั้น บทความบล็อกที่มีปุ่มถูกใจจะทำให้เฉพาะเกาะปุ่มถูกใจโต้ตอบได้ ส่วนข้อความบทความ 1,200 คำ ส่วนหัว และส่วนท้ายจะไม่ก่อให้เกิดการเรียกใช้ JavaScript ฝั่งไคลเอนต์เลย

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

เว็บไซต์ที่ย้ายจาก React SPA ไปใช้สถาปัตยกรรมเกาะ เช่น เว็บไซต์เอกสารของ Astro รายงานการปรับปรุงอย่างมาก: ปริมาณ JavaScript ลดลง 70-90% เวลาจนพร้อมให้โต้ตอบดีขึ้น 2-4 วินาทีบนมือถือ และคะแนนประสิทธิภาพของ Lighthouse เพิ่มจากช่วง 60 เป็น 90 ขึ้นไป ผลลัพธ์เด่นชัดที่สุดบนหน้าที่มีเนื้อหาจำนวนมาก

สถาปัตยกรรมแบบเกาะทำให้หน้าเว็บส่วนใหญ่เป็น HTML แบบสแตติก และไฮเดรตเฉพาะส่วนประกอบแบบโต้ตอบที่แยกออกมา Astro มีไดเรกทีฟการไฮเดรต ได้แก่ client:load (ทันที), client:idle (หลังจากเบราว์เซอร์ว่าง), client:visible (เมื่อเลื่อนดู) และ client:only (แสดงผลเฉพาะฝั่งไคลเอนต์) แต่ละเกาะจะถูกไฮเดรตอย่างอิสระ ทำให้ปริมาณ JavaScript แปรผันตามระดับการโต้ตอบแทนที่จะขึ้นอยู่กับขนาดหน้าเว็บ