Rendering แต่ละแบบต่างกันยังไง ?
สิ่งที่ทำให้เกิดบทความนี้ขึ้นคือความตั้งใจของผมที่อยากจะทบทวนความรู้พื้นฐานเพื่อนำไปใช้งานจริง และแบ่งปันกับผู้ที่อาจจะยังไม่เข้าใจหรืออยากทบทวนครับ 🥳
Rendering คืออะไร?
เมื่อผู้ใช้งานเปิดเว็บไซต์ขึ้นมาแล้ว สิ่งแรก ๆ ที่จะเกิดขึ้นก็คือการแปลงโค้ดที่เขียนไว้ (ที่อยู่ในรูปแบบ HTML, CSS และ JavaScript) ให้กลายเป็นหน้าต่างเว็บไซต์แบบที่เราใช้งานกันทั่วไป และในขั้นตอนนี้เองที่เราเรียกกันว่า rendering
ประเภทของการ render เองก็มีหลายรูปแบบครับ ดังนั้นการที่เราเลือกให้เหมาะสมกับงานที่เราทำก็จะช่วยเราในหลาย ๆ ด้าน ช่วยให้เราลดต้นทุนทั้งเงินหรือเวลา และยังส่งผลต่อเรื่องอื่นด้วย ไม่ว่าจะเป็นความเร็วหรือฟังก์ชั่นของเว็บไซต์, UX หรือผลการค้นหาบน search engine
Client-Side Rendering (CSR)
ในรูปแบบนี้จะเป็นการ render เว็บไซต์บนเว็บเบราว์เซอร์ที่เครื่องของผู้ใช้งานเลย โดยที่จะรับไฟล์ HTML มาก่อน จากนั้นจึงจะโหลดเนื้อหาอื่น ๆ ตามมา แล้วตัว framework ก็จะควบคุมการทำงานของเว็บไซต์จากตัวเบราว์เซอร์ของผู้ใช้งาน เลยเป็นที่มาของชื่อ client-side นั่นเอง
ข้อดี
- เหมาะสำหรับเว็บไซต์ที่มีการตอบสนองกับผู้ใช้งานค่อนข้างบ่อย เนื่องจากผู้ใช้งานจะไม่ต้องรอการโหลดทั้งหน้าจากเซิฟเวอร์แต่จะเป็นการใช้งาน API ในการดึงข้อมูลต่าง ๆ แทน
- ช่วยลดต้นทุนด้านเซิฟเวอร์เนื่องจากขั้นตอนการประมวลผลเว็บไซต์มาอยู่ที่เว็บเบราว์เซอร์ของผู้ใช้งานเอง
ข้อเสีย
- เนื่องจากเป็นการโหลดข้อมูลที่ฝั่งของเว็บเบราว์เซอร์ ทำให้มีความจำเป็นที่ต้องเตรียมความพร้อมของข้อมูลในการเข้าใช้งานครั้งแรก อาจทำให้ผู้ใช้งานต้องรอนาน ส่งผลต่อประสบการณ์การใช้งานเว็บไซต์
- ส่งผลต่ออันดับเว็บไซต์ที่ขึ้นมาบน search engine เนื่องจาก search engine robots จะมองเห็นเนื้อหาของเว็บไซต์ได้ยากกว่าแบบ server-side ที่ render ทั้งหน้าไว้ก่อนแล้ว
ตัวอย่าง framworks เช่น Angular, React, Vue
Server-Side Rendering (SSR)
ในส่วนของการ render แบบ server-side ก็ตามชื่อเลยครับ เว็บไซต์จะ render บนเซิฟเวอร์ก่อนส่งมาให้ผู้ใช้ทั้งหน้า หมายความว่าข้อมูลที่ส่งมานั้นพร้อมใช้งานแล้วและเว็บเบราว์เซอร์ก็สามารถนำไปแสดงผลได้ทันที ทำให้การเข้าใช้งานเว็บไซต์ของผู้ใช้งานมีความรวดเร็วมากขึ้น
ข้อดี
- ช่วยเรื่องอันดับของเว็บไซต์ (SEO) เพราะมีการเตรียมพร้อมหน้าเว็บไซต์แต่ละหน้าไว้สำหรับ search engine bot เรียบร้อยแล้ว หมายความว่าผู้ใช้งานก็สามารถเห็นเนื้อหาของเว็บไซต์ได้ง่ายมากขึ้น เช่น blog หรือ landing page
- เหมาะสำหรับหน้าเว็บที่มีลูกเล่นไม่เยอะ, ข้อมูลไม่ค่อยเปลี่ยนแปลง เนื่องจากหน้าเว็บสามารถพร้อมใช้งานทันที ทำให้ผู้ใช้งานเข้าใช้ได้รวดเร็วขึ้น ไม่จำเป็นต้องรอโหลดทีละส่วนของเว็บไซต์
ข้อเสีย
- เนื่องจากการตอบสนองกับผู้ใช้งานแต่ละครั้งจะมีการ render เว็บไซต์ทั้งหน้า ดังนั้นหากมีการเรียกใช้มากเกินไปจะส่งผลให้ระบบล่มได้
- เพิ่มต้นทุนของเซิฟเวอร์เนื่องจากการ render ทั้งหมดอยู่ที่ฝั่งหลังบ้าน
- อาจไม่รองรับโค้ด JavaScript บางอย่างหรือส่วนเสริมจากที่อื่น ๆ
ตัวอย่าง framworks เช่น Next, Nuxt, Gatsby
Static-Site Rendering
สุดท้ายเป็นการ render ในรูปแบบ static หรือ pre-render หมายความว่าเว็บไซต์จะถูก render ล่วงหน้าไว้เรียบร้อยแล้วตั้งแต่ตอน build และพร้อมใช้งานทันที ส่งผลให้เว็บไซต์แทบจะไม่มีดีเลย์เลยนั่นเอง
ข้อดี
- มีความปลอดภัยสูง เนื่องจากหน้าเว็บมีข้อมูลต่าง ๆ อยู่แล้ว ไม่จำเป็นต้องมีการเชื่อมต่อกับหลังบ้าน (คุณจะไม่โดนแฮคหลังบ้าน ถ้าคุณไม่มีหลังบ้าน 🤣)
- ประหยัดค่าใช้จ่ายด้านเซิฟเวอร์ เนื่องจากมีหน้าที่แค่ส่งไฟล์ให้กับผู้ใช้งาน ไม่มีการประมวลผลหรือ render อีก
- ใช้งานง่าย ไม่จำเป็นต้องตั้งค่าอะไรมาก สามารถอัพโหลดขึ้นเว็บเซิฟเวอร์แล้วใช้งานได้เลย
ข้อเสีย
- หากต้องการอัพเดตจำเป็นต้องอัพเดตไฟล์นั้น ๆ หรือ build ใหม่ทั้งหมด เนื่องจากไม่มีระบบหลังบ้านมารองรับการอัพเดตข้อมูล
- เว็บไซต์จะดูไม่ค่อยมีลูกเล่นมากนัก และหากต้องการเพิ่มการเชื่อมต่อกับหลังบ้าน หรือเพิ่มฟังก์ชั่นต่าง ๆ ก็จะเสียข้อดีด้านความปลอดภัยไป
สรุป
จะเห็นว่าแต่ละรูปแบบก็มีทั้งข้อดีและข้อเสียของตัวมันเอง ดังนั้นการที่เราได้เข้าใจพื้นฐานก็มีส่วนช่วยให้เราสามารถลดค่าใช้จ่ายในด้านต่าง ๆ ได้ครับ แต่อย่างไรก็ตาม ด้วยความสามารถของ framework รุ่นใหม่ ๆ เราก็สามารถปรับปรุงและแก้ไขจุดด้อยของแต่ละรูปแบบได้เช่นกัน และแน่นอนว่าไม่มีตัวเลือกที่ดีที่สุด มีแค่สิ่งที่เหมาะกับเรา (และ product) มากที่สุด 🥂
ไว้พบกันใหม่ในบทความหน้า แต่สำหรับตอนนี้ ขอขอบคุณและสวัสดีครับ 🙏
