การแสดงผลหมายถึงกระบวนการสร้างโค้ดที่จำเป็นในการสร้างหน้าเว็บที่ผู้ใช้ปลายทางสามารถโต้ตอบด้วยผ่านเบราว์เซอร์ของตน ซึ่งรวมถึงการเตรียมเนื้อหา การใช้ตรรกะและการประมวลผล ตลอดจนองค์ประกอบ UI และคอมโพเนนต์อื่นๆ ที่จำเป็นซึ่งจำเป็นต่อการแสดงหน้าสุดท้าย แอปพลิเคชันที่ขับเคลื่อนด้วยเนื้อหาจะเน้นการโหลดที่รวดเร็ว เวลาในการตอบสนองต่ำ และเวลาการแสดงผลที่รวดเร็ว
การแสดงผลฝั่งเซิร์ฟเวอร์ (SSR)
การแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) เกี่ยวข้องกับการแสดงผลหน้าเว็บบนเซิร์ฟเวอร์ แล้วส่ง HTML ที่แสดงผลอย่างสมบูรณ์ไปยังเบราว์เซอร์ของไคลเอ็นต์แทนการแสดงผลบนฝั่งไคลเอ็นต์ด้วย JavaScript เมื่อผู้ใช้เข้าถึงแอปพลิเคชัน เบราว์เซอร์จะส่งคำขอไปยังเซิร์ฟเวอร์ แอปพลิเคชันจะประมวลผลคำขอบนเซิร์ฟเวอร์ ซึ่งรวมถึงการรวบรวมข้อมูลจากฐานข้อมูลหรือ API ภายนอก จากนั้นแสดงผล HTML สำหรับหน้าที่ร้องขอ จากนั้นเซิร์ฟเวอร์จะส่ง HTML ที่แสดงผลอย่างเต็มรูปแบบของหน้ากลับไปยังเบราว์เซอร์ของผู้ใช้ เมื่อเบราว์เซอร์ของผู้ใช้ได้รับ HTML เบราว์เซอร์จะโหลดไฟล์ JavaScript ที่จำเป็น
ข้อดีของการใช้ SSR ได้แก่ ความเร็วในการโหลดเริ่มต้นที่รวดเร็ว ประสิทธิภาพการปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือค้นหา (SEO) ที่ดี ความน่าเชื่อถือ และประสบการณ์โดยรวมที่ดีของผู้ใช้ อย่างไรก็ตาม การใช้งาน SSR อาจซับซ้อนกว่าการแสดงผลฝั่งไคลเอ็นต์ (CSR) เนื่องจากค่าใช้จ่ายในการปฏิบัติงานและทักษะการพัฒนาที่จำเป็นต่อการสร้างและดูแลรักษาแอปพลิเคชันที่รองรับ SSR SSR มีประโยชน์อย่างยิ่งสำหรับเว็บแอปพลิเคชันที่มุ่งเน้นเนื้อหา แพลตฟอร์มอีคอมเมิร์ซ และแอปพลิเคชันใดๆ ที่ต้องการประสิทธิภาพ SEO ที่ดีและตอบสนองได้อย่างรวดเร็วในขั้นต้น
การสร้างเว็บไซต์แบบคงที่ (SSG)
การสร้างเว็บไซต์แบบคงที่ (SSG) จะสร้างไฟล์ HTML แบบคงที่ในเวลาที่สร้างขึ้นและนำส่งไปยังผู้ใช้โดยไม่มีการแสดงผลฝั่งเซิร์ฟเวอร์หรือฝั่งไคลเอ็นต์ เนื้อหาเว็บจะเขียนขึ้นในรูปแบบที่มีโครงสร้าง เช่น Markdown, JSON หรือ YAML และรวมถึงข้อความ รูปภาพ และเนื้อหาอื่นๆ เครื่องมือสร้างเว็บไซต์แบบคงที่ เช่น Hugo หรือ Jekyll จะประมวลผลเนื้อหาและสร้างไฟล์ HTML, CSS และ JavaScript เอาต์พุตแบบคงที่คือทั้งเว็บไซต์ และไฟล์แบบคงที่เหล่านี้มีการทำให้ใช้งานได้ในเว็บเซิร์ฟเวอร์, CDN หรือบริการโฮสติ้ง
ดูข้อมูลเพิ่มเติมเกี่ยวกับ CSS และ HTML ที่ web.dev
เนื่องจากไฟล์เป็นแบบคงที่ ไฟล์ดังกล่าวจึงอาจถูกแคชไว้ ดังนั้นจึงโหลดได้อย่างรวดเร็ว SSG เป็นตัวเลือกที่ดีสำหรับเว็บแอปพลิเคชันที่ไม่มีการเปลี่ยนแปลงบ่อยหรือที่อัปเดตผ่านการสร้างเว็บไซต์เป็นระยะๆ จึงไม่เหมาะกับเว็บแอปพลิเคชันที่มีการโต้ตอบแบบไดนามิก
การแสดงผลฝั่งไคลเอ็นต์ (CSR)
การแสดงผลฝั่งไคลเอ็นต์ (CSR) จะเกิดขึ้นในเบราว์เซอร์ของไคลเอ็นต์ ไม่ใช่บนเซิร์ฟเวอร์ เว็บแอปพลิเคชันมักโหลดที่เทมเพลต HTML แบบเรียบง่าย แล้วแก้ไขเนื้อหาแบบไดนามิกโดยใช้ JavaScript และข้อมูลจากเซิร์ฟเวอร์หรือ API หลังจากมีคำขอของแอปพลิเคชัน เซิร์ฟเวอร์จะส่งเอกสาร HTML แบบเรียบง่ายที่มีโครงสร้างพื้นฐานและโค้ด JavaScript ที่จำเป็นในการแสดงผลหน้าเว็บ โค้ด JavaScript จะดำเนินการในเบราว์เซอร์ของผู้ใช้ จากนั้นโค้ดจะประมวลผลข้อมูลที่ดึงมาและสร้างเนื้อหา ซึ่งรวมถึง CSS, HTML และองค์ประกอบแบบอินเทอร์แอกทีฟทั้งหมด จากนั้นโค้ด JavaScript จะตอบสนองการโต้ตอบของผู้ใช้ เช่น การส่งแบบฟอร์ม
ข้อดีของ CSR คือการเปลี่ยนหน้าเว็บที่รวดเร็วและอินเทอร์เฟซที่ปรับเปลี่ยนตามอุปกรณ์ เว็บแอปพลิเคชันที่ใช้ CSR มักมีเวลาในการโหลดครั้งแรกช้าเมื่อเทียบกับ SSR และอาจทำให้เกิดปัญหาด้าน SEO เมื่อแอปพลิเคชัน CSR เติบโตขึ้น การพัฒนาและบำรุงรักษาอาจค่อนข้างซับซ้อน