SSG, SSR และ CSR🔥
Static Site Generation vs Server Side Rendering vs Client Side Rendering
ยุคนี้การเขียนเว็บใคร ๆ ก็เลือกใช้ Library อย่าง React, Angular, Vue กัน ซึ่งเป็น Library ที่ทำให้เราสามารถสร้างเว็บแอพที่รวดเร็วและตอบสนองผู้ใช้งานได้ดีอย่างที่ไม่เคยมีมาก่อน
แต่ว่า Library เหล่านี้ก็แลกมาด้วยข้อเสียต่าง ๆ เช่น
- เวลาในการโหลดมาแสดงครั้งแรก
- Optimize SEO ได้ยาก
SSG, SSR, CSR คือ ช่วงเวลาที่เว็บแอพของเราจะทำการ render หรือ export ออกมา ซึ่งสามารถช่วยแก้ปัญหาด้านบนได้ มีข้อดีและข้อเสียแตกต่างกันไป วันนี้เราจะมาดูวิธีการเลือกใช้งานกัน 🚀
CSR — Client Side Rendering
เป็นการแสดงผลบนฝั่ง client
- เบราเซอร์ส่งคำขอไปที่เซิร์ฟเวอร์
- เซิร์ฟเวอร์ส่งไฟล์ HTML (ที่ว่างเปล่า) มาให้เบราเซอร์
- เบราเซอร์เริ่มโหลดไฟล์ JavaScript ที่จำเป็น
- เมื่อโหลดสคริปต์เสร็จสิ้น จึงเริ่มการเรนเดอร์
จะเห็นได้ว่า เพื่อที่จะได้หน้าเว็บที่ใช้งานได้ ต้องใช้ขั้นตอนที่มากเกินจำเป็น ต้องมีการโหลดไฟล์หลายเที่ยว ทำให้กว่าจะแสดงผลครั้งแรกได้ก็ใช้เวลานานขึ้น
SSR — Server Side Rendering
แสดงผลโดย render มาแล้วจาก server
- เบราเซอร์ส่งคำขอไปที่เซิร์ฟเวอร์
- เซิร์ฟเวอร์ประมวลผลคำขอ สร้างไฟล์ HTML แล้วส่งกลับ
- เบราเซอร์โหลดมาก็แสดงผลทันที (script ที่เหลือ ที่จำเป็นต่อฟังก์ชั่นในหน้าเว็บก็โหลดอยู่เบื้องหลัง)
- หน้าเว็บสามารถใช้งานได้ปกติ
วิธีการนี้ทำให้การแสดงผลเร็วกว่าวิธีการ CSR เพราะเว็บไซต์ถูก render มาแล้ว จากเซิร์ฟเวอร์
SSG — Static Site Generation
วิธีนี้จะ export เป็นรูปแบบ static ไว้แล้วตอน build time
- เบราเซอร์ส่งคำขอไปที่เซิร์ฟเวอร์
- ส่งไฟล์ HTML ที่ export ไว้ก่อนแล้ว
- เบราเซอร์โหลดมาก็แสดงผลทันที (script ที่เหลือ ที่จำเป็นต่อฟังก์ชั่นในหน้าเว็บก็โหลดอยู่เบื้องหลัง)
- หน้าเว็บสามารถใช้งานได้ปกติ
คล้าย ๆ กับ SSR แต่ต่างกันตรงช่วงเวลาที่ทำการ render รูปแบบ SSG จะสร้างรอไว้อยู่แล้ว ส่วนรูปแบบ SSR จะสร้างใหม่ทุก ๆ การ request ทำให้ SSG เร็วกว่ามาก
เลือกวิธีการไหนดี
การเลือกใช้ขึ้นอยู่กับรูปแบบโครงสร้างของโปรเจคเรา ดังนี้
Dynamic หรือ Static
หากเว็บแอพของเราไม่ต้องการความ dynamic ก็ให้เลือก SSG หรือ CSR ได้เลย เพราะเราจะใช้ SSR ก็ต่อเมื่อต้องการความ dynamic เท่านั้น อย่างเช่น เว็บข่าวสาร เพราะขึ้นอยู่กับชุดข้อมูลล่าสุดบนฐานข้อมูล
SEO จำเป็นหรือไม่
จริง ๆ SEO จำเป็นแทบทุกงานอยู่แล้ว แต่ก็มีข้อยกเว้น อย่างเช่น Dashboard, Control Panel และอื่น ๆ ซึ่งไม่ต้องการให้ขึ้นอยู่บน Search Engine อยู่แล้ว ถ้า SEO จำเป็นให้เลือก SSG หรือ SSR โดยขึ้นอยู่กับว่า static หรือ dynamic
SSG over CSR
หากลังเลว่าจะเลือก CSR หรือ SSG ดี ในกรณีส่วนมากให้เลือก SSG ดีกว่าถ้าเป็นไปได้ เพราะข้อดีจริง ๆ นอกเหนือจาก SEO แล้วก็คือความรวดเร็วในการแสดงผล
SSG ยังเป็น โครงสร้างยอดนิยมที่ Developer เลือกใช้กัน เช่น Jamstack
สรุป
CSR, SSR, SSG คือช่วงเวลาที่เว็บแอพของเราทำการ render หรือ export ออกมาเพื่อส่งให้ฝั่ง client นำไปแสดงผล
สำหรับ SSR และ SSG ส่งผลให้ความเร็วในการแสดงผลดีขึ้นและยังทำให้ SEO Ranking สูงขึ้นอีกด้วย
