ในวงการการพัฒนาเว็บไซต์ เทรนด์ต่างๆ มักจะหมุนเวียนไปมาอยู่เสมอ แต่น้อยครั้งที่เทรนด์เหล่านี้ทำให้เกิดการเปลี่ยนแปลงครั้งใหญ่ จนถึงขั้นรื้อนิยามของโครงสร้างพื้นฐานแบบเดิมๆ
การที่ Astro ผนึกกำลังกับ Cloudflare คือหนึ่งในเหตุการณ์นั้น
เป็นเวลาหลายปีที่ธุรกิจต้องเลือกระหว่าง “ความยืดหยุ่น” (ใช้ Framework ที่ซับซ้อนอย่าง Next.js) หรือจะเลือก “ความเร็ว” (Static Site) แต่การจับมือกันครั้งนี้กำลังท้าทายความเชื่อเดิมๆ ว่าเราไม่จำเป็นต้องเลือกอีกต่อไป ด้วยการผสานประสิทธิภาพของ Astro รวมเข้ากับเครือข่าย Edge ของ Cloudflare เราสามารถมอบประสบการณ์การใช้งานที่หลากหลาย ได้ด้วยความเร็วระดับ Static Site
Astro คืออะไร?
Astro คือ Web Framework ยุคใหม่ที่ออกแบบมาเพื่อเว็บไซต์ที่เน้นคอนเทนต์
ในขณะที่ Framework ยอดฮิตอย่าง Next.js สร้างมาสำหรับแอปพลิเคชันที่มีความซับซ้อนสูง ซึ่งบางครั้งก็เปรียบเหมือนเครื่องจักรขนาดใหญ่ที่ทรงประสิทธิภาพ แต่ต้องใช้เวลาในช่วงเริ่มต้น
แต่ Astro นั้นต่างออกไป เราสามารถสร้างเว็บไซต์ด้วยเครื่องมือที่ทันสมัย (อย่าง React หรือ Vue) แล้ว Astro จะตัดโค้ดที่ไม่จำเป็นทิ้งโดยอัตโนมัติ ก่อนที่จะไปถึงผู้ใช้งาน ทำให้เว็บไซต์ดูทันสมัย แต่โหลดเร็วเหมือนหน้าเว็บไซต์ HTML แบบปกติ
ปัญหาของสถาปัตยกรรมแบบเก่า
เพื่อที่จะเข้าใจว่า ทำไมเรื่องนี้ถึงเป็นจุดเปลี่ยนครั้งสำคัญ เราจำเป็นต้องย้อนดูวิวัฒนาการที่ผ่านมาของเว็บเสียก่อน
ในโมเดลแบบดั้งเดิม ทุกครั้งที่มีผู้ใช้เข้าเว็บคุณ เซิร์ฟเวอร์ที่ตั้งอยู่สักที่จะต้องตื่นขึ้นมาเพื่อสร้างหน้าเว็บทั้งหน้า แล้วส่งโค้ด JavaScript จำนวนมากข้ามน้ำข้ามทะเลมา ผลที่ได้คือหน้าจอมือถือค้างหรือตอบสนองช้า
แต่เครือข่าย Edge เข้ามาเปลี่ยนกฎนี้อย่างสิ้นเชิง แทนที่จะใช้เซิร์ฟเวอร์ตัวเดียว แอปพลิเคชันของคุณจะกระจายตัวอยู่บน Node นับพันจุดทั่วโลก และเมื่อ Astro ผนึกกำลังกับ Cloudflare ซอฟต์แวร์จึงปรับจูนให้วิ่งบนฮาร์ดแวร์แบบกระจายอยู่ทั่วโลกได้อย่างสมบูรณ์แบบ ใช้ประโยชน์จากเครือข่าย Edge ได้อย่างเต็มประสิทธิภาพ
เว็บไซต์คือทรัพย์สิน ไม่ใช่ภาระ
ที่ Outsourcify พวกเราเชื่อเสมอว่าเว็บไซต์ควรจะเป็นทรัพย์สิน ไม่ใช่แหล่งสะสมหนี้ทางเทคนิค
ต้องบอกก่อนว่า Framework อย่าง Next.js นั้นยอดเยี่ยมสำหรับการสร้างแพลตฟอร์มขนาดใหญ่ (เช่น Facebook หรือ Gmail) แต่สำหรับเว็บที่เน้น Content การใช้เครื่องมือเหล่านั้นมักเกินความจำเป็น ทุกฟีเจอร์ที่เพิ่มเข้าไปคือการเพิ่มขนาดไฟล์ JavaScript ซึ่งเปรียบเป็นความเสี่ยงที่คุณหยิบยืมประสิทธิภาพจากในอนาคตมาใช้ จนสุดท้าย ต้องเสียเงินจำนวนมากในการรื้อโค้ดใหม่เพื่อเพิ่มประสิทธิภาพเพื่อกู้ความเร็วกลับคืนมา
Astro ช่วยป้องกันหนี้ทางเทคนิคด้วยแนวคิด Zero JavaScript ทำให้เราสามารถส่งมอบเว็บไซต์ที่ยังคงมีความเร็วสูง แม้เวลาจะผ่านไปหลายปี โดยไม่ต้องคอย “รื้อโค้ดเพื่อซ่อมบำรุง” เพียงเพื่อให้ได้ความเร็วเท่าเดิม
“สถาปัตยกรรมแบบเกาะ”
เราไม่ได้เลือก Astro แค่เพราะความเร็วเพียงอย่างเดียว แต่เราเลือกเพราะความฉลาด เนื่องจาก Astro ใช้รูปแบบที่เรียกว่า “สถาปัตยกรรมแบบเกาะ”
Framework ส่วนใหญ่จะบังคับให้เบราว์เซอร์ของผู้ใช้โหลดทุกอย่างมาพร้อมกันหมด แต่ Astro ไม่เป็นแบบนั้น Astro ทำให้หน้าเว็บเป็นแบบ HTML ปกติซึ่งมีความเร็วสูง และจะทำการ “Hydrate” (เปิดการทำงาน) เฉพาะตอนที่จำเป็นต้องใช้ (เช่น ปุ่ม ‘Buy’ หรือ ช่อง ‘Search’)
วิธีนี้ทำให้ “โครงสร้างหลัก” (Shell) ของเว็บเบาหวิว ในขณะที่เรายังสามารถใช้ส่วนประกอบที่เป็น React หรือ Vue ได้ในจุดที่ต้องการ
พิสูจน์แล้วในสนามจริง
ตัวอย่างที่ชัดเจนที่สุดคือ Aroi Restaurants แพลตฟอร์มจองร้านอาหารแบบครบวงจร
เราตัดสินใจนำ Astro มาใช้ตั้งแต่เวอร์ชัน 2 ตั้งแต่ก่อนที่จะกลายเป็นสิ่งที่ใช้กันอย่างกว้างขวางอย่างในทุกวันนี้ ในตอนนั้น ถือเป็นทางเลือกที่ค่อนข้างเสี่ยง เนื่องจาก Ecosystem ของ Astro ยังใหม่อยู่ ทำให้ยังไม่มีฟีเจอร์ที่สำคัญๆ อย่างการรองรับหลายภาษา แต่แทนที่เราจะรอให้มี Library มารองรับฟีเจอร์นี้ เราตัดสินใจแก้ปัญหาด้วยการพัฒนาระบบนี้ขึ้นมาด้วยตัวเอง
จนมาถึงในปัจจุบันกับการเปิดตัว Astro 6 เครื่องมือต่างๆ ได้เพิ่มขึ้นมาจนครอบคลุมต่อการใช้งานแล้ว ทำให้การพัฒนาง่ายขึ้นกว่าแต่ก่อนมากๆ แต่จุดเด่นของ Astro ก็ยังคงเหมือนเดิม นั่นคือประสิทธิภาพอันยอดเยี่ยม ที่เราได้จาก Astro มาโดยตลอด
Eklektik Rock สื่อดนตรีที่มีคอนเทนต์มหาศาล คือหนึ่งในโปรเจกต์ที่ CTO ของเราสร้างขึ้นด้วยสถาปัตยกรรม Astro x Cloudflare นี่เป็นข้อพิสูจน์ที่ว่า ถึงแม้เว็บไซต์จะมีความซับซ้อนและเนื้อหาเยอะมากขนาดไหน ก็ยังคงรวดเร็วได้ด้วย Astro
ความจริงทางธุรกิจ
จากในมุมมองของการประกอบธุรกิจนั้น การตัดสินใจเปลี่ยนมาเป็น Astro ขึ้นอยู่กับปัจจัยทางเทคนิค 3 ข้อนี้ ที่สามารถแปลงเป็น ROI ได้:
- ความเร็วมีผลต่อ SEO: ตัวชี้วัด INP ใหม่ของ Google นั้นส่งผลกระทบต่อเว็บไซต์ที่เต็มไปด้วย JavaScript อย่างมาก ซึ่ง Astro สามารถแก้ได้ทันที
- ความสามารถ Dynamic ที่แท้จริง: ด้วยการมาถึงของ Astro 6 ฟีเจอร์อย่าง Live Content Collections ทำให้เราสตรีมข้อมูลได้แบบ Real-time (เช่น สต็อกสินค้า) ได้ โดยไม่ต้องสร้างเว็บใหม่ทั้งเว็บ
- ความคุ้มค่า: เมื่อก่อน การพัฒนาสำหรับใช้บนเครือข่ายแบบ Edge นั้นค่อนข้างยุ่งยาก เนื่องจากคอมของ Developer ไม่เหมือนกับเซิร์ฟเวอร์ที่รันอยู่ทั่วโลก การมาถึงของ Astro 6 เข้ามาแก้ไขปัญหานี้ด้วยการจำลองสภาพแวดล้อมของ Cloudflare ได้เลยตั้งแต่ช่วงเขียนโค้ด ซึ่งช่วยลดบั๊กที่อาจเกิดขึ้นหน้างานจริงได้ และช่วยประหยัดงบมากยิ่งขึ้นเนื่องจากใช้เวลาน้อยลง
“แล้วเราจำเป็นต้องรื้อทำใหม่ทั้งหมดเลยมั้ย?”
คำตอบคือ ไม่จำเป็น
หนึ่งในสิ่งที่ Astro ทำได้ดีมากๆ คือความเป็น UI-Agnostic (ไม่ยึดติดกับ UI) ถ้าคุณมีโค้ด React ของคุณอยู่แล้วสำหรับระบบชำระเงิน เราสามารถนำระบบนั้นมาใส่ใน Astro ได้เลย
เราสามารถค่อยๆ ย้ายระบบทีละนิดได้ ด้วยเทคนิคที่เรียกว่า Strangler Fig Pattern โดยเราจะย้ายหน้าเว็บที่คอนเทนต์เยอะๆ ก่อน เพื่อประโยชน์ทางด้าน SEO ในขณะที่ให้ Logic ที่ซับซ้อนทำงานอยู่เหมือนเดิม จนกว่าคุณจะพร้อมปรับปรุงส่วนเหล่านั้น
ทิศทางสู่อนาคต
ในโลกของการพัฒนาเว็บไซต์ที่ไม่เคยหยุดนิ่ง แม้สถาปัตยกรรมแบบเซิร์ฟเวอร์ดั้งเดิมยังคงใช้งานได้ดี แต่ทิศทางของอุตสาหกรรมกำลังมุ่งหน้าไปสู่ การกระจายข้อมูลแบบอัจฉริยะ นั่นคือการทำให้โค้ดอยู่ใกล้ผู้ใช้งานมากที่สุด
เราเชื่อว่าแนวทาง “Edge-First” นี้ ให้ประสิทธิภาพที่ดีที่สุดสำหรับ Web Platform ประสิทธิภาพสูง ทำให้เราส่งมอบประสบการณ์ที่สมบูรณ์ ลื่นไหล โดยไม่ต้องแบกรับต้นทุนด้านประสิทธิภาพแบบในอดีต
หากคุณกำลังวางแผนสร้าง Digital Platform นี่คือโอกาสที่จะได้สร้างบนรากฐานที่ถูกออกแบบมาเพื่อความเร็ว การขยายตัว และมูลค่าที่ยั่งยืนในระยะยาว
