การพัฒนา Web Application ในสมัยใหม่ Developer (ต่อไปผู้เขียนขอเรียกย่อๆ ว่า Dev) จะได้ยินคำว่า Server Side Rendering (SSR) และคำว่า Client Side Rendering (CSR) ซึ่ง Dev เอง อาจจะไม่รู้ด้วยซ้ำ ว่ามันคืออะไร เพราะเราเรียนเขียนแต่โปรแกรม ไม่สนใจขั้นตอนการ Process หรือ Render ออกมาบนหน้าจอของ User ส่วนตัว User ยิ่งไม่รู้ใหญ่เลย ว่า SSR CSR มันทำงานอย่างไร หรือจะต้องรู้ไปทำไม
บทความนี้ จะนำความรู้แค่พอจำเป็นเกี่ยวกับ ครับ SSR และ CSR มาเล่าสู่กันฟัง เพื่อให้ Devs เลือกใช้ Framework ที่เหมาะสมกับ requirement ที่สำคัญของ User คือ การทำ SEO ( Search engine optimization) จะได้ไม่ต้องแก้ไขปัญหากันเยอะ หลังส่งมอบงานให้ลูกค้า
SSR หรือ Server Side Rendering เป็นความสามารถของเว็บไซต์ที่สามารถ render หน้าเว็บบน server แทนที่จะ render บน browser ได้ จึงทำให้ข้อมูลที่ส่งให้ฝั่ง client นั้นถูก render เสร็จเรียบร้อยแล้ว ทำให้ฝั่ง client สามารถนำไปแสดงผลได้ทันที
โดยที่ การ Render ในที่นี้ คือการประมวลผลคำสั่งต่างๆ ที่เราเขียนไว้เป็น CSS และ JavaScript , Typescript หรือ ภาษาใดๆ ให้แสดงเป็น Format ของ HTML เพื่อทำให้ Browser บนเครื่องคอมพิวเตอร์ หรือ Smart Device ของผู้ใช้ (User, Client) แสดงผลออกมาเป็นรูป ได้นั้นเอง
ที่มาของภาพ @altiniker และ
https://www.websitepulse.com/blog/server-side-vs-client-side-rendering-complete-guide
CSR หรือ Client-side rendering นั้นตรงกันข้ามกับ SSR นั่นคือการ render หน้าเพจทั้งหมดจะ render ที่ฝั่ง client โดยเมื่อ server รับคำขอจาก client ฝั่ง server จะส่งเพียงโครงของเว็บไซต์มาให้พร้อมกับไฟล์ JavaScript จากนั้นไฟล์ JavaScript จึงจะทำหน้าที่ Render เพจให้มบูรณ์ ส่งผลให้การโหลดหน้าเว็บไซต์ของ user มีความช้ากว่าแบบ SSR แต่มีการเปลี่ยนหน้าเพจที่เร็ว เพราะทุกหน้าได้ถูก Render ตั้งแต่ส่งไฟล์มาในครั้งแรกแล้ว
ดังนั้น CSR คือ เป็นโหมดการแสดงผลที่ Browser จะประมวลผลคำขอเข้าถึงหน้า โดยใช้ไฟล์ JavaScript เท่านั้นเพื่อสร้างเนื้อหา HTML
ข้อมูลคำสั่งการเข้าถึงจะถูกส่งไปยัง Server ซึ่งส่งคืนด้วย HTML แบบง่ายที่มีข้อมูล JavaScript ที่จะโหลดทั้ง Site
นี่เป็นวิธีการ Render ที่ทันสมัยกว่ามาก เนื่องจากไม่มีการรับหน้า HTML ทั้งหมด จากมุมมองทางเทคนิค โหมดการโหลดนี้ทำให้กระบวนการเร็วขึ้น โดยใช้เวลาน้อยลงจาก Server และ Browser