Multi Page Application Cycle

MPA คือการที่เรามีเว็บไซต์หลายๆหน้าและแยกไฟล์กัน เช่น Home.html About.html Contact.html เป็นที่มาของคำว่า Multi Page ซึ่งต่างจาก SPA ที่มีแค่หน้าเดียวและ MPA เวลาที่ทำการเปลี่ยนหน้า Server จะส่งหน้าเว็บไซต์ทั้งหน้าที่ ประมวลผล(Render) พร้อมข้อมูล และส่งมาแสดงผลบน Browser ให้ผู้ใช้ ซึ่งเป็นเทคโนโลยีที่ใช้กันมานานมากจนถึงปัจจุบัน ก็ยังใช้งานกันแพร่หลายโดย Programming Language ที่ทำ MPA ได้นั้นก็จะมีหลายตัวเช่น PHP, ASP, Ruby

Multi Page Application Flow
Multi Page Application Flow

การ Request หน้าเว็บไซต์

จากภาพด้านบนเมื่อ Client ทำการเข้าเว็บไซต์ Browser จะทำการ Request ไปยัง Server ว่าขอเว็บไซต์หน้า Home ตัว Server จะทำการประมวลผลและส่งข้อมูลกลับมาให้ Browser และ Browser นำไปแสดงผลให้ Client แต่ในระหว่างที่ Browser Request ไปที่ Server นั้นเราจะเจอหน้าเว็บไซต์ขาวๆซักครู่นึง ก่อนจะเห็นหน้าเว็บไซต์สาเหตุนี้ก็เป็นหนึ่งในสาเหตุที่ทำให้เกิด SPA (Single Page Application)

และเช่นเดียวกันเมื่อ Client ทำการกดบันทึกฟอร์มอะไรก็ตาม Browser จะส่ง Request Method POST หรือ GET ไปที่ Server และหลังจาก Server ประมวลผลสำเร็จก็จะส่งหน้า HTML กลับมาซึ่งในระหว่าง Request นี้ก็จะเจอหน้าขาวๆซักครู่นึง…

ข้อดีของ MPA

  • ขึ้นโปรเจค และจบงานได้เร็วกว่า SPA ถ้าทำคนเดียว ถ้าเราทำ Application เล็กๆควรเริ่ม MPA น่าจะเร็วสุด
  • ออกแบบระบบง่ายกว่าเพราะเราไม่ต้องมาแยก Front-end, API, Server ให้วุ่นวาย
  • SEO support 100% เนื่องจาก Meta tag สำหรับ SEO ต่างๆถูกประมวลผลจาก Server จะทำให้ Search Engine สามารถอ่านหน้าเว็บไซต์เราได้ทันที
  • ไม่ต้องแยก Back-end และ Front-end เขียน Select ข้อมูลจาก database เสร็จก็นำข้อมูลมาแสดงผลใน HTML ได้เลย
  • หมดปัญหา Javascript Memory leak เพราะเปลี่ยนหน้าก็เริ่มการทำงานใหม่หมดทุกครั้ง ฮ่าๆ
  • มีปัญหาก็แก้เป็นหน้าๆไป วางโครงสร้างง่าย (ขึ้นอยู่กับความถนัดของแต่ละคนด้วยนะ)
  • การจัดการ Security เราสามารถ Validate ที่ Server ได้ง่าย
  • ราคาในการพัฒนา Application ถูกกว่า SPA แน่นอน
  • Server ที่รัน Application มี Tools support มากมายเพราะเกิดมานานแล้ว หาได้ทั่วไปจาก Hosting ในประเทศไทย

ข้อเสียของ MPA

  • เห็นหน้าเว็บขาวๆ ประมาน 0.1 – 1 วินาที ทุกครั้งที่เปลี่ยนหน้า แต่ไม่เสมอไปอยู่ที่การ Optimize ด้วยนะ
  • ทำ Cross platform ไม่ได้ ถึงได้ก็ลำบากไปเขียน SPA ดีกว่า
  • กินทรัพยากร Server มากกว่า SPA เพราะมันต้อง Render หน้าเว็บใหม่ทุกครั้งที่ผู้ใช้เปลี่ยนหน้า แต่!! ถ้าเอา SPA มาทำ SEO ก็ค่าเท่ากับทำ MPA เหมือนกันเพราะเปลือง Server ที่ Render Meta สำหรับ SEO
  • ทุกครั้งที่เปลี่ยนหน้า จะโหลดช้ากว่า SPA เพราะต้อง Render หน้าเว็บพร้อมข้อมูลทั้งก้อนก่อนส่งกลับมาให้ Browser หมายถึงเราจะเห็นหน้าเว็บช้ากว่า SPA นั้นเอง แต่ช้ากว่าแค่กระพริบตาแค่นั้นละ…

สรุปแล้ว การทำ MPA หรือ SPA นั้นควรดูที่เนื้องาน ถ้าระบบเราจะต้องมี Mobile, Website มาเกี่ยวข้องอาจจะเลือกใช้ SPA เพราะเราสามารถแยก API ออกมาและเขียนเพื่อให้ใช้งานได้ทั้ง Mobile และ Website แต่ถ้ายังไม่มี Mobile หรือยังไม่มีในเร็วๆนี้ส่วนตัวผมแนะนำว่าเราควรทำสิ่งที่หาเงินให้กับธุรกิจให้เร็วที่สุดก่อนหลังจากมันโตไปซักระยะเราสามารถสร้าง Application อีกครั้งก็ยังไม่สาย เพราะอย่าลืมว่ารอ 3 เดือนมี Application ใช้งานได้เลย กับรอ 1 ปีเพื่อรอให้ทุกอย่างเสร็จ Business model อาจจะเก่าไปซะก่อน….

เกี่ยวกับผู้เขียน

Itthipat Thitsarak

สวัสดีครับผม อิทธิพัทธ์ (เป้) เป็น Freelance Web developer ชอบหาเทคนิคต่างๆที่ทำให้ชีวิต Programmer ง่ายขึ้นโดย Blog นี้จะ สอน Laravel, Vuejs, CSS, HTML 5 และอื่นๆ ที่เกี่ยวกับการทำเว็บไซต์

ขอบคุณทุกคนที่ติดตาม และอ่านบทความของผมครับ หากใครมีคำถามหรืออยากให้ผมเขียนเกี่ยวกับเรื่องอะไรเพิ่มเติม สามารถแสดงความคิดเห็นไว้ที่ใต้บทความ หรือส่งเรื่องเข้ามาที่ Email ได้เลยครับ หัวข้อไหนน่าสนใจ ผมจะหยิบมาเขียนบทความให้ได้อ่านกันเรื่อยๆครับ

Scroll to Top
Scroll to Top