SPA (Single Page Application) คืออะไร

Single Page Application Flow
Single Page Application Flow

SPA คือ การที่เรามีไฟล์ index.html และ import javascript อยู่ 1 ไฟล์ เมื่อเปิดหน้าเว็บไซต์สำเร็จตัว Application จะโหลดไฟล์ javascript ที่มีหน้าเว็บต่างๆที่เราเขียนไว้แล้วพ่นมันออกมาเป็น HTML ซึ่งหน้าตา HTML จะมีประมานนี้

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
        <div id="app"></div>
        <script src="/app.js"></script>
</body>
</html>

พอ Application โหลดเสร็จก็จะนำข้อมูลไปใส่ไว้ใน <div id=”app”> และเมื่อผู้ใช้ทำการกดเปลี่ยนหน้า Application จะทำการเปลี่ยนข้อมูลใน <div id=”app”> ซึ่งทำให้เกิด Effect หนึ่งอย่างที่เด่นๆเลยคือมันไม่ต้องโหลดหน้าเว็บใหม่จะโหลดแค่ครั้งแรกเท่านั้น เพราะเวลากดเปลี่ยนหน้าตัว Application จะทำการเอา HTML ที่อยู่ใน Javascript ที่โหลดมาก่อนหน้าแทนที่ลงไปใน <div id=”app”> ทันที แต่ส่วนของข้อมูลก็จะ AJAX ไปที่ Server เพื่อขอข้อมูลในรูปแบบของ JSON เพื่อนำมาแสดงผลให้ผู้ใช้เท่านั้น

SPA Framework มีอะไรบ้าง ?

ปัจจุบัน SPA Framework ที่เด่นๆเลยจะมีประมานนี้ครับ แต่มีอีกหลายตัวที่ไม่ได้พูดถึงเช่นกัน

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

Single Page Application Flow
Single Page Application Flow

แน่นอนว่าการ Request เพื่อเรียกเว็บไซต์จะต่างกับ MPA(Multi Page Application) อยู่บ้างเอาละเรามาดูกัน

  1. เมื่อผู้ใช้ทำการเรียกไปที่เว็บไซต์ตัว Server จะส่ง HTML พร้อม Assets ต่างๆกลับมาโดยหน้าตา HTML จะเหมือนกับที่ได้กล่าวไปตอนต้นบทความ
  2. เมื่อ Browser ได้รับข้อมูลทั้ง HTML และ Javascript ก็จะทำการอ่าน JS ที่ได้รับพร้อมกับนำข้อมูลไปแป๊ะใน element ที่กำหนดไว้ซึ่งขั้นตอนนี้ก็จะทำงานเหมือนกับ MPA ปกติ
  3. ในระหว่างนั้นถ้า User ทำการกดลิงก์ภายในเว็บไซต์ตัว JS ที่โหลดมาก่อนหน้านั้นก็จะทำการเช็ค Router หรือเส้นทางภายใน code ที่เรากำหนด หลังจากเจอ Route ที่เราเขียนก็จะนำ Component ต่างๆมาแป๊ะลงใน Element ที่กำหนดเลยทำให้ไม่ต้อง Refresh หน้าเว็บเลย
  4. ในขั้นตอนของการนำข้อมูลมาแป๊ะใน Element นั้นตัว Component ใดๆที่มีการเรียกข้อมูลจาก API จะทำการเรียก API และนำ JSON ที่ได้รับมาแปลงเป็นหน้าตาเว็บไซต์ให้ User ได้รับชม และจะไม่มีการโหลดหน้าเว็บไซต์อีก
  5. ในกรณีที่ User ไม่ได้กดเปลี่ยนหน้าแต่ทำการพิมพ์ URL หรือกด Refresh ตัวเว็บไซต์ก็จะกลับไปทำข้อ 1 ใหม่อีกครั้งครับ

ข้อดีของ SPA

  • หน้าเว็บจะทำงานเร็วมากเพราะโหลด Assets ต่างๆครั้งเดียว
  • ไม่มีหน้าขาวๆ ประมาน 1 วินาทีในการเปลี่ยนหน้าเพราะมันโหลดตัวหน้าเว็บมาแล้วในครั้งแรกที่ Request
  • ปัจจุบันเขียน SPA ได้ก็สามารถทำ Cross platform ไป Mobile ได้ ความหมายคือสามารถนำเอา component และ code ส่วนใหญ่แปลงไปเป็น Mobile นั้นเอง
  • ไม่กินทรัพยากร Server เพราะข้อมูลส่วนใหญ่จะถูกส่งเป็น Json ไม่ต้อง Render ทั้งเว็บแบบ MPA
  • ทำเป็น Web Application แบบ Offline (PWA) ได้ด้วย
  • ว่ากันว่า User Experience ดีกว่า MPA (ไม่จริงซะทีเดียว!! SPA โหลดช้ามีเยอะแยะ ฮ่าๆ)

ข้อเสียของ SPA

  • โหลดหน้าเว็บครั้งแรกช้ามาก ขึ้นอยู่กับขนาดของ Application และการ Optimize ด้วย
  • เราต้องแยก Back-end ออกจาก Front-end คือรันแยกกันอาจจะคนละ Container หรือคนละ Server เพื่อการ Scale ที่ดี
  • เราต้องเขียนต่อ Front-end กับ Back-end ผ่านการ Ajax เพื่อขอข้อมูลมาแสดงผลใน SPA
  • ส่วนตัวผมมองว่าเพิ่มงานขึ้นด้วย เพราะต้องเขียน API เพิ่ม
  • ไม่เป็นผลดีต่อ SEO มากๆ เพราะมันมีหน้าเดียว ต่อให้เปลี่ยนหน้า Meta tags ก็ไม่เปลี่ยน แต่ปัจจุบันก็มี SPA ที่รองรับ SEO ออกมาแล้วเช่น Next และ Nuxt แต่ก็ต้องทำหลายอย่างเพื่อให้ได้ SEO กลับคืนมา
  • ข่าวแว่วๆว่า Google Search Engine ทำรองรับ SPA แล้วแต่ก็ต้องรอประกาศกันอย่างจริงจังต่อไป

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

ITTHIPAT

สวัสดีครับผม อิทธิพัทธ์ (เป้) ชอบหาเทคนิคต่างๆที่ทำให้ชีวิต Programmer ง่ายขึ้น ทั้ง Automate, Library ชอบทำ Blog และ Video ถ้ามีเวลานะ!

ขอบคุณทุกคนที่ติดตาม และอ่านบทความของผมครับ ผมหวังว่าความรู้ที่เขียนขึ้นในเว็บไซต์นี้จะช่วยทุกท่านได้ไม่มากก็น้อย 

Scroll to Top