Island Architecture ใน Astro ทำงานอย่างไร?

เกริ่นนำกันก่อน

ผมได้มีโอกาสใช้ Astro Framework ในการปรับปรุง Blog จาก Next.js มาเป็น Astro ในระหว่างที่อ่านเอกสารของ Astro ก็ได้เจอกับแนวคิด Island Architecture ซึ่งทำให้สงสัยว่ามันแตกต่างจาก Hydrate ที่คุ้นเคยใน Next.js อย่างไร ถ้าใครยังไม่รู้ว่า Hydrate คืออะไร ลองอ่านบทความที่ผมเขียนไว้แล้วได้เลยครับ!

Island Architecture ทำงานยังไง มาทำความเข้าใจกัน

Island Architecture เป็น Design Pattern ที่ขึ้นอยู่กับแนวคิดของ Partial and Selective Hydration

ถ้าคุณเคยเขียน Next.js มาก่อน คุณคงคุ้นเคยกับการทำ Hydrate แบบเต็มหน้า (Full Hydration) ซึ่งอาจทำให้เจอปัญหาด้านประสิทธิภาพ การ Hydrate ทั้งหน้าใช้ JavaScript จำนวนมาก ถ้าเราสามารถแยก Hydrate เฉพาะบาง Component ได้ก็น่าจะดีกว่า (ในที่นี้ยังไม่พูดถึงการใช้งาน Dynamic Components เพื่อทำ Partial Hydrate นะครับ)

และนั่นเป็นที่มาของ Island Architecture ซึ่งเป็นแนวทางการแก้ปัญหาดังกล่าว มาดูกันครับว่ามันทำงานอย่างไร

Island Architecture เป็นแนวคิดการออกแบบที่ถูกใช้ใน Astro เพื่อลดภาระการโหลดของหน้าเว็บ โดยแบ่งองค์ประกอบของหน้าออกเป็นหลายส่วน (Islands) ที่สามารถทำงานได้อย่างอิสระ ส่วนที่ไม่จำเป็นต้องทำงานแบบ dynamic จะถูกโหลดเป็น HTML static ตั้งแต่แรก และ “Islands” ที่มี dynamic interaction จะถูกประมวลผลเฉพาะเมื่อต้องการเท่านั้น

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

jasonformat.com-islands-architecture — Source: https://jasonformat.com/islands-architecture/

การทำงานของ Island Architecture:

หน้า HTML ทั้งหมดถูกสร้างขึ้นเป็น static โดยไม่ต้องโหลด JavaScript ทั้งหมดทันที
Components (หรือ Islands) ที่ต้องการ interactivity เช่น forms, buttons หรือ widgets จะถูกโหลดเฉพาะส่วนและทำการ hydrate เฉพาะเมื่อต้องการ
วิธีการนี้ทำให้การแสดงผลเบื้องต้น (First Paint) เร็วขึ้น และลดภาระงานของ JavaScript ที่อาจทำให้หน้าเว็บช้าลงบนฝั่ง client

ข้อดีและข้อเสียของ Island Architecture

Pro

ประสิทธิภาพการโหลดเร็วขึ้น: หน้าเว็บถูกสร้างเป็น static HTML ก่อน และ hydrate เฉพาะ components ที่จำเป็น
ลดขนาด JavaScript Bundle: ลดเวลาและทรัพยากรในการโหลดหน้าเว็บ เนื่องจากโหลด JavaScript เฉพาะที่จำเป็น
ยืดหยุ่นในการพัฒนา: สามารถเลือก component ที่จะ hydrate ตามความต้องการ ทำให้พัฒนาง่ายขึ้นและแยกส่วนได้ดี

Con

ไม่เหมาะสำหรับทุกกรณีการใช้งาน: หากเว็บมีความ interactive สูงมาก ๆ อาจไม่เหมาะ เพราะต้องทำ hydration หลายส่วน ซึ่งเพิ่มความซับซ้อน

Conclusion

Island Architecture ใน Astro เป็นแนวทางการออกแบบที่เน้นการแยกองค์ประกอบ static และ dynamic เพื่อให้หน้าเว็บโหลดได้เร็วและมีประสิทธิภาพ ด้วยการใช้ Partial Hydration สำหรับ Component ที่ต้องการ dynamic interaction ได้รับการ hydrate ทำให้ลดภาระของ JavaScript และปรับปรุง UX ให้ดีขึ้น เหมาะกับเว็บไซต์ที่เน้น Static Content เช่น Blog หรือ E-commerce มากกว่าที่จะใช้กับเว็บที่ต้องการความ interactive

อ้างอิง

Astro Island Architecture

Island Architecture Design Pattern

JasonFormat Island Architecture