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

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 แล้วแต่ก็ต้องรอประกาศกันอย่างจริงจังต่อไป