ในโลกของการพัฒนาเว็บสมัยใหม่ ประสิทธิภาพและความเร็วในการโหลดถือเป็นหัวใจสำคัญของประสบการณ์ผู้ใช้ (UX) แนวคิดของ Astro และ Component Islands Architecture ได้นำเสนอวิธีการใหม่ในการสร้างเว็บไซต์ที่รวดเร็วอย่างเหลือเชื่อ โดยเฉพาะอย่างยิ่งการทำงานแบบ Zero JavaScript by default ซึ่งหมายถึงการลดภาระงานฝั่งไคลเอนต์ให้เหลือน้อยที่สุด
แม้ว่า Astro จะเป็นเครื่องมือสำหรับ Front-end แต่หลักการทำงานของมันนั้นสามารถเปรียบเทียบได้กับการออกแบบระบบฐานข้อมูลที่เน้นประสิทธิภาพสูงอย่าง PostgreSQL ซึ่งเราจะมาเจาะลึกว่าแนวคิด Component Islands และการทำงานแบบ Zero JS นั้นทำงานอย่างไรในเชิงสถาปัตยกรรมที่เน้นความแม่นยำและประสิทธิภาพสูงสุด
Component Islands คืออะไรในมุมมองของสถาปัตยกรรม
Component Islands คือแนวคิดที่ว่าแทนที่จะเรนเดอร์หน้าเว็บทั้งหมดด้วย JavaScript (ซึ่งอาจทำให้เกิดขนาดไฟล์ที่ใหญ่และโหลดช้า) เราจะเรนเดอร์ส่วนประกอบ (Component) ที่จำเป็นต้องมีการโต้ตอบกับผู้ใช้ (Interactive) ด้วย JavaScript เพียงส่วนนั้น ๆ เท่านั้น ส่วนที่เหลือของหน้าเว็บจะถูกเรนเดอร์เป็น HTML แบบ Static ที่สมบูรณ์ตั้งแต่ต้นทาง (Server-Side Rendering: SSR)
ในเชิง PostgreSQL เราสามารถเปรียบเทียบ Component Islands ได้กับการกำหนดฟังก์ชัน (Function) หรือ Stored Procedure ที่ทำงานแบบ Isolation กล่าวคือ ระบบหลัก (PostgreSQL) จะจัดการเรนเดอร์โครงสร้างข้อมูลพื้นฐานทั้งหมด (Static HTML) และเมื่อใดก็ตามที่ส่วนประกอบใดส่วนประกอบหนึ่งต้องการการโต้ตอบที่ซับซ้อน (เช่น การกรองข้อมูลแบบเรียลไทม์) ก็จะเรียกใช้ฟังก์ชันเฉพาะนั้น ๆ เท่านั้น โดยไม่รันโค้ดที่เกินความจำเป็น
Zero JS by Default: การทำงานแบบ Server-First
การทำงานแบบ Zero JS by default คือการที่ระบบจะพยายามเรนเดอร์ทุกอย่างให้เสร็จสมบูรณ์ที่ฝั่งเซิร์ฟเวอร์ (Server-Side) ก่อนจะส่ง HTML ที่พร้อมใช้งานไปยังเบราว์เซอร์ นี่คือการลดภาระงานของ JavaScript ให้เป็นศูนย์ในสถานการณ์ที่ส่วนประกอบนั้นไม่จำเป็นต้องมีการโต้ตอบใด ๆ
ลองพิจารณาการประมวลผลข้อมูลใน PostgreSQL เมื่อเรามีรายการข้อมูลแบบ comma-separated string การใช้ฟังก์ชันที่เหมาะสมจะทำให้การประมวลผลเป็นไปอย่างมีประสิทธิภาพสูงสุด โดยไม่จำเป็นต้องวนลูปด้วยโค้ดที่ซับซ้อนเกินความจำเป็น นี่คือตัวอย่างการแยกส่วนข้อมูล (Isolation) ที่รวดเร็ว:
SQL
-- ตัวอย่างการแยกส่วนข้อมูลแบบ Isolated Component (PostgreSQL) --
SELECT
unnest(string_to_array('1,2,3', ',')) AS processed_item;
ในตัวอย่างนี้ ระบบจะใช้ฟังก์ชัน `string_to_array` เพื่อแยกสตริง ‘1,2,3’ ออกเป็นอาร์เรย์อย่างรวดเร็ว และใช้ `unnest` เพื่อดึงค่าออกมาเป็นแถว ๆ ซึ่งเป็นการทำงานที่ถูกจำกัดขอบเขต (Isolated) และมีประสิทธิภาพสูงมาก ไม่มีการประมวลผลเกินความจำเป็น
สรุป: ความเหนือชั้นของสถาปัตยกรรม Islands
Component Islands Architecture ทำให้เราสามารถรวมข้อดีของการเรนเดอร์แบบ Server-Side (ความเร็วเริ่มต้นที่สูงมาก) เข้ากับความสามารถในการโต้ตอบของ Client-Side (ความยืดหยุ่น) ได้อย่างลงตัว มันคือการออกแบบระบบที่ให้ความสำคัญกับการทำงานแบบ Default คือการทำงานที่เบาที่สุด (Minimal Overhead) และเรียกใช้พลังงาน (JavaScript) ก็ต่อเมื่อจำเป็นจริง ๆ เท่านั้น ทำให้ได้ผลลัพธ์ที่ทั้งเร็วและมีประสิทธิภาพสูงสุด