SSG, SSR และ CSR🔥

Static Site Generation vs Server Side Rendering vs Client Side Rendering

Photo by Caspar Camille Rubin on Unsplash

ยุคนี้การเขียนเว็บใคร ๆ ก็เลือกใช้ Library อย่าง React, Angular, Vue กัน ซึ่งเป็น Library ที่ทำให้เราสามารถสร้างเว็บแอพที่รวดเร็วและตอบสนองผู้ใช้งานได้ดีอย่างที่ไม่เคยมีมาก่อน

แต่ว่า Library เหล่านี้ก็แลกมาด้วยข้อเสียต่าง ๆ เช่น

• เวลาในการโหลดมาแสดงครั้งแรก
• Optimize SEO ได้ยาก

SSG, SSR, CSR คือ ช่วงเวลาที่เว็บแอพของเราจะทำการ render หรือ export ออกมา ซึ่งสามารถช่วยแก้ปัญหาด้านบนได้ มีข้อดีและข้อเสียแตกต่างกันไป วันนี้เราจะมาดูวิธีการเลือกใช้งานกัน 🚀

CSR — Client Side Rendering

Client Side Rendering processes

เป็นการแสดงผลบนฝั่ง client

1. เบราเซอร์ส่งคำขอไปที่เซิร์ฟเวอร์
2. เซิร์ฟเวอร์ส่งไฟล์ HTML (ที่ว่างเปล่า) มาให้เบราเซอร์
3. เบราเซอร์เริ่มโหลดไฟล์ JavaScript ที่จำเป็น
4. เมื่อโหลดสคริปต์เสร็จสิ้น จึงเริ่มการเรนเดอร์

จะเห็นได้ว่า เพื่อที่จะได้หน้าเว็บที่ใช้งานได้ ต้องใช้ขั้นตอนที่มากเกินจำเป็น ต้องมีการโหลดไฟล์หลายเที่ยว ทำให้กว่าจะแสดงผลครั้งแรกได้ก็ใช้เวลานานขึ้น

SSR — Server Side Rendering

Server Side Rendering processes

แสดงผลโดย render มาแล้วจาก server

1. เบราเซอร์ส่งคำขอไปที่เซิร์ฟเวอร์
2. เซิร์ฟเวอร์ประมวลผลคำขอ สร้างไฟล์ HTML แล้วส่งกลับ
3. เบราเซอร์โหลดมาก็แสดงผลทันที (script ที่เหลือ ที่จำเป็นต่อฟังก์ชั่นในหน้าเว็บก็โหลดอยู่เบื้องหลัง)
4. หน้าเว็บสามารถใช้งานได้ปกติ

วิธีการนี้ทำให้การแสดงผลเร็วกว่าวิธีการ CSR เพราะเว็บไซต์ถูก render มาแล้ว จากเซิร์ฟเวอร์

SSG — Static Site Generation

Static Site Generation processes

วิธีนี้จะ export เป็นรูปแบบ static ไว้แล้วตอน build time

1. เบราเซอร์ส่งคำขอไปที่เซิร์ฟเวอร์
2. ส่งไฟล์ HTML ที่ export ไว้ก่อนแล้ว
3. เบราเซอร์โหลดมาก็แสดงผลทันที (script ที่เหลือ ที่จำเป็นต่อฟังก์ชั่นในหน้าเว็บก็โหลดอยู่เบื้องหลัง)
4. หน้าเว็บสามารถใช้งานได้ปกติ

คล้าย ๆ กับ 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

สรุป

Photo by Eilis Garvey on Unsplash

CSR, SSR, SSG คือช่วงเวลาที่เว็บแอพของเราทำการ render หรือ export ออกมาเพื่อส่งให้ฝั่ง client นำไปแสดงผล

สำหรับ SSR และ SSG ส่งผลให้ความเร็วในการแสดงผลดีขึ้นและยังทำให้ SEO Ranking สูงขึ้นอีกด้วย