คงรายงานเดิมไว้ และปรับปรุงได้อย่างอิสระ: บันทึกการออกแบบหน้าแบบสแตติกที่แก้ปัญหาด้วย Vike
(blog.lemonbase.team)ทีม Lemonbase แนะนำกรณีศึกษาการนำ Vike มาใช้และประยุกต์แนวทางหน้าแบบสแตติก (SSG) เพื่อคงผลลัพธ์ของรายงานเดิมไว้ได้อย่างเสถียร พร้อมกับปรับปรุงหน้ารายงานได้อย่างอิสระ
เนื้อหาหลัก
- รายงานเดิมจำเป็นต้องตรึงข้อมูลและ UI ของช่วงเวลาหนึ่งไว้ แต่ด้วยโครงสร้างการเรนเดอร์ฝั่งไคลเอนต์ (CSR) ทำให้เมื่อมีการเปลี่ยนแปลง logic/ดีไซน์ รายงานเดิมก็ได้รับผลกระทบไปด้วย
- มีการพิจารณาวิธีแก้หลายแบบ (module federation, การจัดการเวอร์ชันของคอมโพเนนต์ ฯลฯ) แต่สุดท้ายตัดสินใจว่า การสร้าง หน้าแบบสแตติก (SSG) เป็นแนวทางที่เหมาะสมที่สุด
- เพิ่มเพียงการตั้งค่าเล็กน้อยบนโปรเจกต์เดิมที่ใช้ Vite ก็สามารถนำ SSG มาใช้ผ่าน Vike ได้
- สร้างและตรึงไฟล์ HTML ที่รวมข้อมูล ณ เวลาที่เผยแพร่รายงานไว้
- สำหรับพรีวิวก่อนเผยแพร่ ยังคงให้สะท้อนข้อมูลแบบเรียลไทม์
- ผสานรายงานเข้ากับตัวผลิตภัณฑ์ด้วยวิธี iframe เพื่อเชื่อมต่อ UX ให้เป็นธรรมชาติ
- ผลลัพธ์หลังนำไปใช้:
- รายงานเดิมไม่เปลี่ยนแปลง และรายงานใหม่สามารถปรับปรุงได้อย่างอิสระ
- ประสิทธิภาพดีขึ้น (โหลดเร็วขึ้น) และลดต้นทุนการบำรุงรักษา
- นำมาใช้ได้อย่างรวดเร็วโดยไม่ต้องมีอินฟราสตรักเจอร์ขนาดใหญ่แยกต่างหาก
- อย่างไรก็ตาม จุดที่น่าเสียดายคือ Vike มีชุมชนขนาดเล็ก ทำให้มีแหล่งอ้างอิงไม่มาก
เหมาะสำหรับ
- ทีมที่กำลังมองหาวิธีจัดการหน้ารายงานให้เสถียรตามแต่ละเวอร์ชัน
- นักพัฒนา FE ที่ต้องการเปลี่ยนจากโครงสร้าง CSR ไปเป็น SSG หรือจำเป็นต้องออกแบบแบบผสม
- นักพัฒนาที่อยากเพิ่มความสามารถหน้าแบบสแตติกให้โปรเจกต์ที่ใช้ Vite ได้อย่างเบาแรง
ยังไม่มีความคิดเห็น