ในการพัฒนาเว็บการเติมน้ำหรือการเติมน้ำซ้ำเป็นเทคนิคที่JavaScript ฝั่งไคลเอ็นต์ แปลงเว็บเพจที่คงที่จากมุมมองของเว็บเบราว์เซอร์ซึ่งส่งมาผ่านการเรนเดอร์แบบคงที่หรือการเรนเดอร์ฝั่งเซิร์ฟเวอร์ให้เป็นเว็บเพจแบบไดนามิกโดยการแนบตัวจัดการเหตุการณ์เข้ากับองค์ประกอบ HTML ในDOM [ ^{1 ] เนื่องจาก HTML ได้รับการเรนเดอร์ล่วงหน้าบนเซิร์ฟเวอร์ ทำให้เกิด "การแสดงผลเนื้อหาครั้งแรก" ที่}รวดเร็ว (เมื่อข้อมูลที่เป็นประโยชน์แสดงต่อผู้ใช้เป็นครั้งแรก) แต่จะมีช่วงเวลาหนึ่งหลังจากนั้นที่หน้าเว็บดูเหมือนจะโหลดเสร็จสมบูรณ์และโต้ตอบได้ แต่จะไม่เป็นเช่นนั้นจนกว่า JavaScript ฝั่งไคลเอ็นต์จะถูกเรียกใช้งานและตัวจัดการเหตุการณ์จะถูกแนบ^{[ 2 ]}

เฟรมเวิร์กที่ใช้ไฮเดรชั่น ได้แก่Next.js ^{[ 3 ]}และNuxt ^{[ ​​4 ]} React v16.0 ได้แนะนำฟังก์ชัน "hydrate" ซึ่งไฮเดรตองค์ประกอบในAPI ของ มัน^{[ 5 ] [ 6 ]}

การเรนเดอร์ฝั่งเซิร์ฟเวอร์แบบสตรีมมิ่งช่วยให้สามารถส่ง HTML เป็นส่วนๆ ซึ่งเบราว์เซอร์สามารถเรนเดอร์ได้ทีละส่วนเมื่อได้รับ ซึ่งจะทำให้การแสดงผลครั้งแรกและการแสดงผลเนื้อหาครั้งแรกเร็วขึ้น เนื่องจากมาร์กอัป HTML มาถึงผู้ใช้ได้เร็วขึ้น^{[ 2 ]}

ในการรีเฟรชแบบก้าวหน้าชิ้นส่วนแต่ละชิ้นของแอปพลิเคชันที่เรนเดอร์บนเซิร์ฟเวอร์จะถูก "บูต" ทีละส่วนตามเวลา แทนที่จะใช้วิธีการเริ่มต้นแอปพลิเคชันทั้งหมดพร้อมกัน ซึ่งเป็นวิธีที่นิยมใช้กันในปัจจุบัน วิธีนี้สามารถช่วยลดปริมาณ JavaScript ที่จำเป็นในการทำให้หน้าเว็บโต้ตอบได้ เนื่องจากสามารถเลื่อนการอัปเกรดฝั่งไคลเอ็นต์ของส่วนที่มีลำดับความสำคัญต่ำของหน้าเว็บออกไปเพื่อป้องกันการบล็อกเธรดหลัก นอกจากนี้ยังสามารถช่วยหลีกเลี่ยงข้อผิดพลาดที่พบบ่อยที่สุดอย่างหนึ่งของการรีเฟรชการเรนเดอร์ฝั่งเซิร์ฟเวอร์ ซึ่งโครงสร้าง DOM ที่เรนเดอร์บนเซิร์ฟเวอร์จะถูกทำลายแล้วสร้างใหม่ทันที ซึ่งส่วนใหญ่มักเป็นเพราะการเรนเดอร์ฝั่งไคลเอ็นต์แบบซิงโครนัสเริ่มต้นต้องการข้อมูลที่ยังไม่พร้อม อาจกำลังรอการแก้ไขPromise อยู่ ^{[ 2 ]}

การคืนสภาพบางส่วนพิสูจน์แล้วว่าทำได้ยาก วิธีการนี้เป็นส่วนขยายของแนวคิดการคืนสภาพแบบค่อยเป็นค่อยไป โดยที่ชิ้นส่วนแต่ละชิ้น (ส่วนประกอบ/มุมมอง/โครงสร้าง) ที่จะคืนสภาพแบบค่อยเป็นค่อยไปจะได้รับการวิเคราะห์ และชิ้นส่วนที่มีการโต้ตอบน้อยหรือไม่ตอบสนองจะถูกระบุ สำหรับแต่ละส่วนที่เป็นแบบคงที่ส่วนใหญ่เหล่านี้ โค้ด JavaScript ที่เกี่ยวข้องจะถูกแปลงเป็นข้อมูลอ้างอิงที่ไม่ทำงานและฟังก์ชันตกแต่ง ลดการใช้ทรัพยากรฝั่งไคลเอ็นต์ให้เหลือเกือบศูนย์ วิธีการคืนสภาพบางส่วนมาพร้อมกับปัญหาและข้อจำกัดของตัวเอง มันก่อให้เกิดความท้าทายที่น่าสนใจบางประการสำหรับการแคชและการนำทางฝั่งไคลเอ็นต์หมายความว่าไม่สามารถสันนิษฐานได้ว่า HTML ที่แสดงผลบนเซิร์ฟเวอร์สำหรับส่วนที่ไม่ทำงานของแอปพลิเคชันจะพร้อมใช้งานโดยไม่ต้องโหลดหน้าเว็บทั้งหมด^{[ 2 ]}

เฟรมเวิร์กหนึ่งที่รองรับการคืนสภาพบางส่วนคือ Elder.js ซึ่งใช้Svelteเป็น พื้นฐาน ^{[ 7 ]}

การเรนเดอร์แบบไตรโซมอร์ฟิกเป็นเทคนิคที่ใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์แบบสตรีมมิ่งสำหรับการนำทางเริ่มต้น/ที่ไม่ใช่ JavaScript จากนั้นใช้เซอร์วิสเวิร์กเกอร์เพื่อทำการเรนเดอร์ HTML สำหรับการนำทางหลังจากติดตั้งแล้ว วิธีนี้จะช่วยให้ส่วนประกอบและเทมเพลตที่แคชไว้เป็นปัจจุบันอยู่เสมอ และช่วยให้ การนำทางแบบ SPAสามารถเรนเดอร์มุมมองใหม่ในเซสชันเดียวกันได้ วิธีนี้ได้ผลดีที่สุดเมื่อสามารถใช้โค้ดการสร้างเทมเพลตและการกำหนดเส้นทางร่วมกันระหว่างเซิร์ฟเวอร์ หน้าเว็บไคลเอ็นต์ และเซอร์วิสเวิร์กเกอร์ได้^{[ 2 ]}