ในบทความนี้ ฉันจะพยายามตรวจสอบปัญหา SSR และ CSRซึ่งฉันได้กล่าวถึงไปแล้วก่อนหน้านี้อย่างละเอียดเพิ่มเติม ฉันจะอธิบายวิธีการแสดงผลในบทความ

ในบทความนี้ ฉันจะทบทวนบทความ Rendering on Webของ Jason Miller และ Addy Osmani และพยายามอธิบายหัวข้อนี้

บทความนี้มีพื้นฐานมาจาก บทความของฉันว่าควรทำการเรนเดอร์ HTML ที่ไหน?ที่ผมเขียนไว้เมื่อระยะหนึ่งก่อนเริ่มต้นด้วยคำถามในโพสต์บล็อก

เมื่อมีการพัฒนาเว็บไซต์ มีความเป็นไปได้ในการดำเนินการตรรกะและเรนเดอร์ในที่ต่างๆ นักพัฒนาจะตัดสินใจอย่างไรว่าจะเลือกวิธีการใดเมื่อมีวิธีการพัฒนาหน้าเว็บที่แตกต่างกัน

ในการตัดสินใจนี้ นักพัฒนาต้องมีความเข้าใจที่ดีเกี่ยวกับวิธีการเรนเดอร์และการแลกเปลี่ยนประสิทธิภาพที่เกิดขึ้น

ก.การเรนเดอร์

หากคุณกำลังสงสัยว่าหัวข้อการเรนเดอร์คืออะไร? คุณสามารถอ่านรายละเอียดได้ ในบล็อก ที่ฉันอธิบายหัวข้อนี้
ไว้

B. เว็บแบบคงที่และแบบไดนามิก

อีกสิ่งหนึ่งที่ต้องเข้าใจคือความแตกต่างระหว่างเว็บแบบคงที่และเว็บแบบไดนามิกหน้าเว็บแบบคงที่คือหน้าเว็บที่ไม่ได้ย้อนกลับมาที่เซิร์ฟเวอร์และส่งคำขอด้วย AJAX หลังจากดึงหน้าเว็บจากเซิร์ฟเวอร์ (HTML, CSS, JS) เนื้อหาจะไม่เปลี่ยนแปลงไปตามผู้ใช้หรือไม่มีข้อมูลไดนามิก (อัตราแลกเปลี่ยน, สภาพอากาศ ฯลฯ) เนื่องจากข้อมูลในนั้นมีการเปลี่ยนแปลง ตัวอย่างเช่น บล็อก ข่าวสาร ฯลฯ ในทางตรงกันข้าม หน้าไดนามิกเป็นหน้าเว็บที่ต้องใช้ AJAX, API, ฐานข้อมูล ฯลฯ โดยที่เนื้อหาของหน้าจะเปลี่ยนแปลงไปตามช่วงเวลาและพารามิเตอร์ที่เรียก

C. เงื่อนไขการปฏิบัติงาน

• TTFB (เวลาถึงไบต์แรก)ระยะเวลาตั้งแต่การคลิกลิงก์จนถึงการรับเนื้อหาชิ้นแรก
• FP (First Paint)เวลาที่ใช้ในการแสดงพิกเซลแรกให้ผู้ใช้เห็น
• FCP (First Contentful Paint)เวลาที่แสดงเนื้อหาเชิงตรรกะแรกในการร้องขอ
• TTI Time To Interactiveเวลาที่หน้าพร้อมสำหรับการโต้ตอบกับผู้ใช้ (การเชื่อมต่อเหตุการณ์ทั้งหมด)

• SSR (Server Side Rendering)เป็นวิธีการที่ดำเนินการเรนเดอร์บนฝั่งเซิร์ฟเวอร์และสร้างเพจไดนามิกโดยดึงข้อมูลจากฐานข้อมูลโดยใช้วิธีการต่างๆ เช่น ASP.Net, JSP, PHP เนื่องจาก JS จะมีบทบาทน้อยลงมากในการสร้างหน้าจอ ดังนั้นFPและFCPจึงเร็วมาก ในขณะที่เวลาที่ข้อมูลมาถึงจากเซิร์ฟเวอร์ใน TTFBจะนานกว่า
• CSR (Client Side Rendering)เป็นวิธีการที่ทำการเรนเดอร์บนฝั่งเบราว์เซอร์โดยใช้วิธีต่างๆ เช่น Angular, React, Vue, Svelte โดยดึงหน้าไดนามิกด้วย AJAX และสร้างหน้าจอบนหน้าจอโดยการรวมเทมเพลต + ข้อมูลเข้ากับวิธีการ Template Rendering ในวิธีนี้ แม้ว่าเราจะทำ TTFB และ FPได้เร็วขึ้นเราก็ไม่สามารถเพิ่มความเร็วของ TTI ได้ นั่นคือ เวลาที่ผู้ใช้ใช้ในการโต้ตอบกับหน้าเว็บที่เกี่ยวข้อง
• การเรนเดอร์แบบคงที่:ในวิธีนี้ที่ใช้สำหรับหน้าคงที่ เนื่องจากหน้าต่างๆ มีการเปลี่ยนแปลงน้อยมากและไม่จำเป็นต้องมีฐานข้อมูล หน้าต่างๆ จึงถูกนำไปสู่สถานะสุดท้ายโดยใช้วิธีการเรนเดอร์ล่วงหน้า ก่อนที่จะถูกส่งไปยังเซิร์ฟเวอร์ และจะถูกส่งไปยัง CDN หรือสภาพแวดล้อมแคชแบบเอจ และจะให้บริการได้อย่างรวดเร็วจากที่นั่น เมื่อไม่นานมานี้ การสร้างหน้าประเภทนี้กลายเป็นเรื่องง่ายมากขึ้นด้วยเครื่องมือ Gatsby และ Jekyll ในหน้านี้ทั้ง เวลา TTFBและTTIค่อนข้างสั้น ความต้องการในการดำเนินการหรือการโต้ตอบ JS ของหน้าเหล่านี้ต่ำและจำกัดมาก
• การเรนเดอร์แบบไฮบริด:ในขณะที่การสร้าง SSR ให้กับหน้าบางหน้าตามปริมาณการโหลดเนื้อหานั้นก็ดูสมเหตุสมผล แต่การสร้างหน้าที่มีการโหลดสูงบางหน้าโดยใช้ CSR แบบขี้เกียจก็ดูสมเหตุสมผลเช่นกัน เฟรมเวิร์กเช่น Next, Nuxt, Nest, Sapper ได้เกิดขึ้นมาเพื่อรองรับสถานการณ์ดังกล่าว กรอบงานนี้มีความสามารถที่คล้ายคลึงกันในการนำเอาแนวทางการพัฒนาส่วนประกอบ Next – React, Nuxt – Vue, Nest – Angular, Sapper – Svelte มาใช้ในการพัฒนาโค้ด

อ้างอิง

• การเรนเดอร์บนเว็บ
• ความแตกต่างระหว่างหน้าเว็บแบบคงที่และแบบไดนามิก
• ควรทำการเรนเดอร์ HTML ที่ไหน?

คุณสามารถคลิก ลิงค์นี้เพื่อเข้าถึงบทความต่อจากนี้หรือบทความอื่นๆในกลุ่มบทความ ได้