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 หน้าเว็บไซต์
แน่นอนว่าการ Request เพื่อเรียกเว็บไซต์จะต่างกับ MPA(Multi Page Application) อยู่บ้างเอาละเรามาดูกัน
- เมื่อผู้ใช้ทำการเรียกไปที่เว็บไซต์ตัว Server จะส่ง HTML พร้อม Assets ต่างๆกลับมาโดยหน้าตา HTML จะเหมือนกับที่ได้กล่าวไปตอนต้นบทความ
- เมื่อ Browser ได้รับข้อมูลทั้ง HTML และ Javascript ก็จะทำการอ่าน JS ที่ได้รับพร้อมกับนำข้อมูลไปแป๊ะใน element ที่กำหนดไว้ซึ่งขั้นตอนนี้ก็จะทำงานเหมือนกับ MPA ปกติ
- ในระหว่างนั้นถ้า User ทำการกดลิงก์ภายในเว็บไซต์ตัว JS ที่โหลดมาก่อนหน้านั้นก็จะทำการเช็ค Router หรือเส้นทางภายใน code ที่เรากำหนด หลังจากเจอ Route ที่เราเขียนก็จะนำ Component ต่างๆมาแป๊ะลงใน Element ที่กำหนดเลยทำให้ไม่ต้อง Refresh หน้าเว็บเลย
- ในขั้นตอนของการนำข้อมูลมาแป๊ะใน Element นั้นตัว Component ใดๆที่มีการเรียกข้อมูลจาก API จะทำการเรียก API และนำ JSON ที่ได้รับมาแปลงเป็นหน้าตาเว็บไซต์ให้ User ได้รับชม และจะไม่มีการโหลดหน้าเว็บไซต์อีก
- ในกรณีที่ 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 แล้วแต่ก็ต้องรอประกาศกันอย่างจริงจังต่อไป
