Single Page Application or Multiple Page Application (SPA vs MPA)

SPA (Single Page Application)

เว็บแอปพลิเคชั่นหน้าเดียวเหมาะอย่างยิ่งสำหรับการสร้างแพลตฟอร์มแบบไดนามิก
ที่มีปริมาณข้อมูลขนาดเล็ก นอกจากนี้แอปหน้าเดียวเหมาะอย่างยิ่งสำหรับเป็นพื้นฐาน
สำหรับการพัฒนาแอปมือถือในอนาคต แต่เอาเข้าจริงแล้ว เว็บใหญ่ๆ หลายๆ เว็บ ก็ไม่ได้เป็น Single page application แบบสมบูรณ์นะครับ ก็ยังคงใช้แบบผสมผสานกันไปตามรูปแบบ หรือสถานการณ์ เช่น อะไรที่เป็นการใช้งานที่ต่อเนื่องกันจริงก็จะออกแบบให้เป็น Single page application เพื่อให้การใช้งานลื่นไหลมากที่สุด

- ลดเวลาตอบสนองและต้นทุนฮาร์ดแวร์

- UI ที่ยืดหยุ่น

- แอปพลิเคชันหน้าเดียวให้ประสบการณ์ที่ลื่นไหลและตอบสนองมากขึ้น

- แอพระดับองค์กรนั้นยากต่อการออกแบบ และดูแลรักษาเว็บแบบ SPA
  เนื่องจากจำนวนไฟล์ที่สร้างขึ้นจำนวนมาก

- SEO นั้นมีประสิทธิภาพน้อยลง เนื่องจากซอฟต์แวร์รวบรวมข้อมูล SEO ส่วนใหญ่อาศัยเนื้อหาที่มีเสถียรภาพภายในหน้าเว็บที่แตกต่างกัน

- JavaScript ไม่ใช่ภาษาที่ต้องคอมไพล์ดังนั้นซอร์สโค้ดสามารถถูกเปิดเผยต่อผู้ใช้ที่เป็นอันตราย

- SPA คือของใหม่และทีมพัฒนาของคุณจะต้องคุ้นเคยกับเครื่องมือเฉพาะ (เช่น: NPM, Webpack เป็นอย่างน้อย )

- ปุ่มย้อนกลับและไปข้างหน้าเบราว์เซอร์ไม่ทำงาน
- History ของเบราว์เซอร์มีเพียงหน้าแรก

ตัวอย่างเว็บเป็น SPA 
- เช่นเมื่อเราเลือก จดหมาย, จดหมายขยะ , ส่งแล้ว ข้อมูลจะไม่ถูกโหลดใหม่ทั้งหน้า
- https://cashnotify.com
- https://seedlipdrinks.com
- https://angular-university.io/
- (คลิป) https://www.youtube.com/watch?v=Bn0wby8fwFg



MPA (Multiple Page Application)

แอปพลิเคชั่นหลายหน้าเหมาะสำหรับ บริษัท ขนาดใหญ่ที่มีผลิตภัณฑ์หรือบริการที่หลากหลายซึ่งต้องการฟีเจอร์และเมนูมากมาย MPA นั้นเหมาะสำหรับร้านค้าออนไลน์ไซต์ธุรกิจแคตตาล็อก ที่ใช้เว็บไซต์เหล่านี้อาจมีฐานผู้ใช้ที่หลากหลาย หากคุณมีเนื้อหาและฟีเจอร์มากมายที่จะรวมไว้ในเว็บไซต์หรือถ้าคุณขายผลิตภัณฑ์ และบริการหลายรายการ MPA น่าจะเป็นตัวเลือกที่ดี

หากต้องการดูตัวอย่างของเว็บแบบ MPA แค่คิดถึงเว็บไซต์ที่ซับซ้อนที่มีหลายหน้า
เช่น Amazon หรือ eBay

- MPA ทำงานโดยการร้องขอหลายครั้งระหว่างไคลเอนต์และเซิร์ฟเวอร์ เมื่อเว็บไซต์มีความซับซ้อนเพิ่มขึ้น สิ่งต้องมีสิ่งที่เข้ามาช่วยคือ AJAX , JQUERY ซึ่งช่วยให้หน้าเว็บได้รับการอัปเดตโดยไม่ต้องโหลดซ้ำ

- โดยปกติการโหลดหน้าเริ่มต้นจะเร็วกว่าการโหลดหน้าเริ่มต้นของ SPA

- SEO นั้นง่ายและมีประสิทธิภาพ เครื่องมือค้นหาส่วนใหญ่สร้างขึ้นสำหรับ MPA

- เฟรมเวิร์กฝั่ง MPA ส่วนใหญ่มีการรักษาความปลอดภัยที่ผ่านการทดสอบ และทดสอบแล้ว

- MPA เครื่องมือการดีบักที่ได้รับความนิยมมากมายรวมอยู่ใน IDE (โปรแกรมที่เอาไว้เขียนโปรแกรม)

- MPA มักจะถูกกว่าในหลายๆเรื่องเพราะใช้เทคโนโลยีที่เป็นที่ยอมรับมากกว่า และมีนักพัฒนาในตลาดมากขึ้น



Ref:
https://www.scalablepath.com/blog/single-page-applications/
https://yalantis.com/blog/single-page-apps-vs-multiple-page-apps/
https://rubygarage.org/blog/single-page-app-vs-multi-page-app
https://medium.com/@puuga/