SSR ย่อมาจาก " Server-Side Rendering ," เป็นเทคนิคการพัฒนาเว็บที่เกี่ยวข้องกับการสร้างเนื้อหา HTML ของหน้าเว็บบนเซิร์ฟเวอร์ก่อนที่จะส่งไปยังเบราว์เซอร์ของผู้ใช้ สิ่งนี้ตรงกันข้ามกับแนวทาง "การเรนเดอร์ฝั่งไคลเอ็นต์"(CSR) ซึ่งเบราว์เซอร์ดาวน์โหลดโค้ด JavaScript และสร้างหน้าเว็บหลังจากดาวน์โหลด
โครงสร้างและหลักการทำงานของ SSR
-
คำขอของผู้ใช้: เมื่อผู้ใช้เข้าถึงเว็บไซต์ เบราว์เซอร์จะส่งคำขอไปยังเซิร์ฟเวอร์
-
การประมวลผลเซิร์ฟเวอร์: เซิร์ฟเวอร์รับคำขอและประมวลผลโดยการสร้างเนื้อหา HTML ของหน้าเว็บ ซึ่งรวมถึงการดึงข้อมูลจากฐานข้อมูล การสร้างส่วนประกอบอินเทอร์เฟซ และการประกอบเนื้อหาลงในเอกสาร HTML ที่สมบูรณ์
-
การสร้าง HTML ที่สมบูรณ์: หลังจากประมวลผลแล้ว เซิร์ฟเวอร์จะสร้างเอกสาร HTML ที่สมบูรณ์ซึ่งประกอบด้วยเนื้อหา ข้อมูล และส่วนประกอบอินเทอร์เฟซที่จำเป็น
-
การส่งไปยังเบราว์เซอร์: เซิร์ฟเวอร์จะส่งเอกสาร HTML ที่สมบูรณ์กลับไปยังเบราว์เซอร์ของผู้ใช้
-
การแสดงผลเพจ: เบราว์เซอร์ได้รับเอกสาร HTML และแสดงผลให้กับผู้ใช้ โค้ด JavaScript และทรัพยากรแบบคงที่(CSS, รูปภาพ) จะถูกโหลดและดำเนินการโดยเบราว์เซอร์เช่นกัน
ประโยชน์ของ SSR
- ข้อดี SEO: เสิร์ชเอ็นจิ้นสามารถเข้าใจและจัดอันดับเว็บไซต์ได้ดีขึ้นเมื่อเนื้อหาถูกแสดงผลล่วงหน้าบนเซิร์ฟเวอร์
- แสดงผลเร็วขึ้น: ผู้ใช้เห็นเนื้อหาเร็วขึ้นเนื่องจากมีการแสดงผลเอกสาร HTML ล่วงหน้า
- การสนับสนุนสำหรับอุปกรณ์ที่อ่อนแอ: เนื้อหาที่แสดงผลล่วงหน้าช่วยปรับปรุงประสบการณ์สำหรับอุปกรณ์ที่มีประสิทธิภาพต่ำหรือการเชื่อมต่อที่อ่อนแอลง
- การสนับสนุนสำหรับผู้ใช้ที่ไม่ใช่ JavaScript: SSR ช่วยให้สามารถแสดงเวอร์ชันพื้นฐานสำหรับผู้ใช้ที่ไม่ได้ใช้ JavaScript
โดยสรุป SSR จะเพิ่มประสิทธิภาพและความสามารถในการค้นหาเว็บไซต์โดยการสร้างเนื้อหา HTML บนเซิร์ฟเวอร์ก่อนที่จะส่งไปยังเบราว์เซอร์ สิ่งนี้มอบประสบการณ์ผู้ใช้ที่ดีขึ้น ปรับปรุงอันดับของเครื่องมือค้นหา และปรับปรุงประสิทธิภาพเว็บไซต์โดยรวม