การเขียนโปรแกรมแบบ SSR (Server-Side Rendering) และ CSR (Client-Side Rendering) ต่างมีข้อดีและข้อเสียต่างกันไป ขึ้นอยู่กับจุดประสงค์ของเว็บไซต์ที่เราต้องการจะสร้าง วันนี้ผมจึงจะมาอธิบายความแตกต่างระหว่าง SSR และ CSR
SSR (Server-Side Rendering)
SSR หรือ Server-side rendering เป็นความสามารถของเว็บไซต์ที่สามารถ render หน้าเว็บบน server แทนที่จะ render บน browser ได้ จึงทำให้ข้อมูลที่ส่งให้ฝั่ง client นั้นถูก render เสร็จเรียบร้อยแล้ว ทำให้ฝั่ง client สามารถนำไปแสดงผลได้ทันที ส่งผลให้การเข้าหน้าเว็บไซต์ของ user มีความรวดเร็วกว่าแบบ CSR
CSR (Client-Side Rendering)
CSR หรือ Client-side rendering นั้นตรงกันข้ามกับ SSR นั่นคือการ render หน้าเพจทั้งหมดจะ render ที่ฝั่ง client โดยเมื่อ server รับคำขอจาก client ฝั่ง server จะส่งเพียงโครงของเว็บไซต์มาให้พร้อมกับไฟล์ javascript จากนั้นไฟล์ javascript จึงจะทำหน้าที่ render เพจให้มบูรณ์ ส่งผลให้การโหลดหน้าเว็บไซต์ของ user มีความช้ากว่าแบบ SSR แต่มีการเปลี่ยนหน้าเพจที่เร็ว เพราะทุกหน้าได้ถูก render ตั้งแต่ส่งไฟล์มาในครั้งแรกแล้ว
CSR (Client-Side Rendering)
CSR หรือ Client-side rendering นั้นตรงกันข้ามกับ SSR นั่นคือการ render หน้าเพจทั้งหมดจะ render ที่ฝั่ง client โดยเมื่อ server รับคำขอจาก client ฝั่ง server จะส่งเพียงโครงของเว็บไซต์มาให้พร้อมกับไฟล์ javascript จากนั้นไฟล์ javascript จึงจะทำหน้าที่ render เพจให้มบูรณ์ ส่งผลให้การโหลดหน้าเว็บไซต์ของ user มีความช้ากว่าแบบ SSR แต่มีการเปลี่ยนหน้าเพจที่เร็ว เพราะทุกหน้าได้ถูก render ตั้งแต่ส่งไฟล์มาในครั้งแรกแล้ว
ทีนี้เรามาดูกันว่าการเขียนโปรแกรมให้ render บนทั้งสองฝั่งนั้นเหมาะสมกับจุดประสงค์การสร้างเว็บไซต์แบบไหน
สำหรับ SSR
– ต้องการทำ SEO ให้ผู้ใช้ค้นหาเพจต่าง ๆ ของเว็บไซต์ของคุณได้ เนื่องจากการทำ SSR จะส่งผลให้ search engine สามารถมองเห็นข้อความในหน้าเว็บไซต์ได้
– ต้องการให้ผู้ใช้ได้รับ UX (User Experience) ที่ดีในการโหลดหน้าเว็บไซต์ที่ไว
– เว็บไซต์ที่สร้างไม่ต้องการการตอบสนองมาก เพราะการตอบสนองแต่ละครั้งจะทำให้ server ต้องทำงาน และอาจส่งผลให้ server ล่มได้หากได้รับการ request จากฝั่ง client มากเกินไป
สำหรับ CSR
– ถ้าการทำ SEO ไม่สำคัญสำหรับเว็บไซต์
– เว็บไซต์มีการตอบสนองกับผู้ใช้บ่อย
– ต้องการประหยัด server
จากที่กล่าวมาทั้งหมดจะเห็นได้ว่าการเขียนโปรแกรมในแต่ละรูปแบบมีข้อดีและข้อเสียต่างกันไป ผมหวังเป็นอย่างยิ่งว่าบทความนี้จะเป็นประโยชน์แก่ผู้พัฒนาเว็บไซต์ที่กำลังตัดสินใจเขียนโปรแกรมแบบ SSR หรือ CSR ไม่มากก็น้อย
ผู้เขียน เธียรวิชญ์ สิริสาครสกุล
วันที่ 27 สิงหาคม 2564
อ้างอิง : https://dev.to/alain2020/ssr-vs-csr-2617