ก่อนที่เราจะมาอธิบายว่า Single Page Application คืออะไร เราขออธิบายเนื้อหาในบทความนี้ก่อนดังนี้ครับ
- SPA คืออะไร
- MPA คืออะไร
- ข้อดี-ข้อเสีย ของ SPA
- ข้อดี-ข้อเสีย ของ MPA
- SPA หรือ MPA เหมาะกับ Project คุณ
SPA คืออะไร
Single Page Application (SPA) คือ application ที่สามารถใช้งานบน web browser ได้โดยไม่ต้อง reload page
MPA คืออะไร
Multi-Page Application (MPA) คือ application ที่สามารถใช้งานบน web browser โดยเมื่อคลิกไปที่ลิงค์ต่างๆ หน้า page จะมีการ reload ใหม่
ข้อดีของ SPA
- SPA เร็ว เนื่องจาก resources ส่วนใหญ่ (็HTML, CSS, Scripts) มีการ load ในครั้งแรกครั้งเดียวในการเข้าใช้งานเลย มีเพียง data ที่จะทยอยโหลดเข้ามาตามที่ user ใช้งาน
- ง่ายต่อการ debug ด้วยการใช้ chrome browser tools เช่นการ network monitor ตรวจเช็คการ รับ-ส่ง ข้อมูล เมื่อไม่มีการ reload page ก็จะสามารถ debug ได้ง่ายขึ้นเพราะ ข้อมูลที่ถูก capture ไว้จะไม่หายบ่อยๆ
- ใช้การ Cache ได้อย่างมีประสิทธิภาพมากขึ้น เพราะ มีการ โหลดข้อมูลมาครั้งเดียวทำให้สามารถใช้งานแบบ offline ได้มากขึ้น
ข้อเสียของ SPA
- ทำ SEO Optimization ค่อนข้างยาก เนื่องจาก SPA มี ข้อมูลเปลี่ยนไป-มาใน page เดียว ทำให้ search engine ตรวจจับหาคำค้นหาค่อนข้างยาก
- สามารถทำให้ application ช้าได้เนื่องจาก มีการโหลด resources ลงใน device ครั้งเดียว ถ้าหาก performance ของ device นั้นไม่ได้สูง อาจจะทำให้ application ช้าลงได้ และ ควรคำนึงถึงการ load resource ครั้งแรกด้วย ถ้า resource มีขนาดใหญ่เกินไปจะทำให้ application โหลดช้าในตอนแรกได้
- application จะไม่สามารถใช้งานได้ถ้า user ปิดการใช้งาน javascript ต้องหาวิธีแก้ไขต่อไป
- ความปลอดภัยในเรื่อง cross-site scripting (XSS) hacker สามารถ inject script ไปที่ client-side ได้ควรเช็คให้ดี
- Memory leak ใน javascript ควรเช็คเรื่องนี้ให้ดีอาจจะทำให้ระบบช้าลงได้
ข้อดีของ MPA
- ง่ายต่อการทำ SEO Optimization เนื่องจาก หน้า page มีการแบ่งชัดเจน ทำให้ search engine ค้นหาคำ search ได้ง่ายขึ้น
- ง่ายต่อการ customize application เพียงแค่ เพิ่ม page ใหม่และเรียกใช้ url link ได้เลย
ข้อเสียของ MPA
- ช้า เมื่อมีการ reload page เพราะต้อง load resource ใหม่หมด เว้นแต่จะมีการทำ cache ข้อมูลบางส่วนเก็บไว้
- mantainance ลำบากกว่าเพราะมีหลายหน้าถ้า design ไม่ดีอาจจะต้องมาตรวจสอบ security หลายหน้า
SPA หรือ MPA เหมาะกับ Project คุณ
SPA เหมาะสำหรับ application ที่ค่อนข้างเฉพาะหน่อย เช่น Gmail, Facebook newsfeed ส่วน MPA เหมาะสำหรับ application ที่มีหลายๆ catagory หน่อยเช่น Shoppe, Lazada ควรเลือกให้เหมาะสมกับ project ที่เราทำ สามารถนำหลักการเหล่านี้มาทำรวมกันได้แล้วแต่สถานการณ์
References
- https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58
- https://huspi.com/blog-open/definitive-guide-to-spa-why-do-we-need-single-page-applications
- https://dzone.com/articles/the-comparison-of-single-page-and-multi-page-appli
P.S. หากข้อมูลผิดพลาดยังไงผมขอโทษครับ แล้ว comment บอกผมด้วยนะครับ
