มาทำความเข้าใจเกี่ยวกับ Hydration ใน SSR ของ : NextJS กันดีกว่า

บ่นก่อนเข้าเรื่องกันดีกว่า

ใครที่เคยเขียน Next.js หรือ framework ที่มีการใช้ SSR (Server-Side Rendering) มาสักพัก หรือคนที่เริ่มต้นใหม่ อาจจะเคยได้ยินคำว่า hydrate กันมาบ้าง หลายคนอาจสงสัยว่ามันคืออะไรกันแน่ ถ้าสงสัยอยู่ เรามาทำความเข้าใจเรื่องนี้ไปพร้อมกันดีกว่า

Hydration คืออะไรกันแน่

Hydration คือเทคนิคที่ช่วยให้ SSR (Server-Side Rendering) สามารถทำงานได้อย่างสมบูรณ์ โดยจะทำให้ static HTML ที่ถูก render มาจาก server สามารถกลายเป็นหน้าเว็บที่ interactive ได้ในฝั่ง client-side

พูดง่าย ๆ คือ เมื่อ server ทำการ render HTML แล้วส่งมาที่ client มันจะยังเป็นเพียง static HTML แต่กระบวนการ hydration จะช่วยให้ HTML นั้นสามารถโต้ตอบกับผู้ใช้ได้ โดยการเติม JavaScript เข้ามาเพื่อจัดการ event และ state ต่าง ๆ

Hydration ทำงานอย่างไร

ตัวอย่างให้เห็นภาพ: ในครั้งแรกที่ SSR ทำการ render HTML นั้น หน้าเว็บจะยังไม่สามารถโต้ตอบอะไรได้ เมื่อ HTML ถูกโหลดเสร็จ เบราว์เซอร์จะเริ่มโหลด JavaScript และทำการเพิ่ม event listeners รวมถึง initialize state เพื่อให้ static HTML สามารถกลายเป็นหน้าเว็บที่ interactive ได้ ซึ่งกระบวนการนี้เรียกว่า hydration

ประโยชน์ของ Hydration

เพิ่มความเร็วในการเห็นข้อมูลหน้าแรก (Time to Interactive): Hydration ช่วยให้หน้าเว็บสามารถแสดงเนื้อหาได้อย่างรวดเร็ว แม้ว่าจะยังไม่สามารถโต้ตอบได้เต็มที่ก็ตาม ซึ่งช่วยลดเวลาในการรอให้หน้าเว็บพร้อมใช้งาน
ปรับปรุง SEO: เนื่องจาก HTML ถูก render มาจาก server ทำให้ bot ของ search engine สามารถทำงานได้อย่างมีประสิทธิภาพมากขึ้น เนื่องจากมีเนื้อหาพร้อมสำหรับการทำ indexing
ประสบการณ์ผู้ใช้ (UX) ที่ดีขึ้น: ผู้ใช้สามารถเห็นเนื้อหาบนหน้าเว็บได้เร็วขึ้น ทำให้การรับรู้ของผู้ใช้เกี่ยวกับประสิทธิภาพของเว็บดีขึ้น แม้ว่าการโต้ตอบบางส่วนจะยังต้องรอการโหลด JavaScript ก็ตาม

สรุป

แม้ว่า hydration จะมีข้อดีในการช่วยให้เว็บไซต์สามารถเรนเดอร์ได้เร็วขึ้นด้วย SSR และเพิ่มความ interactive ด้วย JavaScript แต่กระบวนการนี้ก็มีข้อจำกัดในเรื่องของความซับซ้อน การใช้ทรัพยากรที่สูง และความเสี่ยงของการเกิด mismatch การเข้าใจข้อจำกัดเหล่านี้จะช่วยให้เราตัดสินใจเลือกวิธีการเรนเดอร์ที่เหมาะสมสำหรับโปรเจกต์ของเรา

อ้างอิง

Understanding SSR with Hydration for Software Architects