การปรับปรุงแบบค่อยเป็นค่อยไปด้วยการดำเนินการฝั่งเซิร์ฟเวอร์

การเพิ่มความสามารถแบบก้าวหน้าเป็นแนวทางการพัฒนาเว็บที่เริ่มจากพื้นฐาน HTML ซึ่งใช้งานได้จริง แล้วจึงเสริมความสามารถของ JavaScript เข้าไป ฟังก์ชันหลักทำงานได้สำหรับผู้ใช้ทุกคน รวมถึงผู้ที่ปิดใช้งาน JavaScript ผู้ที่มีการเชื่อมต่อช้า หรือผู้ที่ใช้เทคโนโลยีสิ่งอำนวยความสะดวก ขณะที่ผู้ใช้ที่เปิดใช้งาน JavaScript จะได้รับประสบการณ์ที่ดียิ่งขึ้น

ฟอร์มที่มี action={serverAction} จะทำงานเป็นการส่ง HTML POST แบบเต็มหน้าได้แม้ไม่มี JavaScript เบราว์เซอร์จะส่งฟอร์ม เซิร์ฟเวอร์จะเรียกใช้การทำงานนั้น แล้วส่งหน้า HTML ที่อัปเดตแล้วกลับมา กลไกนี้เป็นแบบเดียวกับที่ขับเคลื่อนฟอร์มบนเว็บมาตั้งแต่ปี 1995 — การทำงานบนเซิร์ฟเวอร์ของ React ออกแบบมาให้ใช้ร่วมกับกลไกนี้ได้

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

เมื่อ React ทำให้หน้าโต้ตอบได้ React จะดักรับการส่งฟอร์มและจัดการในรูปแบบการเรียกใช้การทำงานบนเซิร์ฟเวอร์แบบอะซิงโครนัส แทนการส่ง POST แบบเต็มหน้า ผู้ใช้จะได้รับการอัปเดตในหน้าเดิมโดยไม่ต้องโหลดหน้าใหม่ เห็นสถานะกำลังดำเนินการ และได้ส่วนติดต่อผู้ใช้แบบคาดการณ์ล่วงหน้า ทั้งหมดนี้ทำได้โดยไม่ต้องเปลี่ยนการทำงานหรือโครงสร้างฟอร์มเดิม

เซิร์ฟเวอร์จะสร้างฟอร์มพร้อมฝังสถานะเริ่มต้นไว้ใน HTML เมื่อ React ทำให้หน้าโต้ตอบได้ ก็จะรับสถานะเริ่มต้นนั้นไปใช้โดยไม่ทำให้เกิดการกะพริบหรือความไม่ตรงกัน useActionState ได้รับการออกแบบมาเพื่อผสานสถานะเริ่มต้นที่สร้างจากเซิร์ฟเวอร์เข้ากับการทำให้หน้าโต้ตอบได้ฝั่งไคลเอนต์อย่างราบรื่น

การเปลี่ยนผ่านของ React ช่วยให้ส่วนติดต่อผู้ใช้ยังโต้ตอบได้ระหว่างการเรียกใช้การทำงานบนเซิร์ฟเวอร์ การครอบการส่งฟอร์มไว้ในการเปลี่ยนผ่านทำให้ React ลดลำดับความสำคัญของการเดินทางไปกลับระหว่างเซิร์ฟเวอร์ลง และคงความตอบสนองของหน้าไว้ได้ นี่คือสิ่งที่ทำให้ประสบการณ์ที่เสริมด้วย JavaScript รู้สึกเร็วกว่าอย่างเห็นได้ชัดเมื่อเทียบกับการโหลดหน้าใหม่ทั้งหน้า

เมื่อไม่มี JavaScript: ผู้ใช้คลิกส่ง เบราว์เซอร์ส่ง POST แบบเต็มหน้า เซิร์ฟเวอร์ตอบกลับด้วยหน้า HTML ใหม่ ซึ่งรวมถึงการกะพริบเป็นสีขาวชั่วครู่และการรีเซ็ตตำแหน่งการเลื่อน เมื่อมี JavaScript: React ดักรับการส่ง ฟอร์ม การทำงานจะทำงานแบบอะซิงโครนัส และมีเพียงส่วนที่เปลี่ยนแปลงของหน้าเท่านั้นที่อัปเดตในตำแหน่งเดิม — ไม่มีการกะพริบและไม่มีการรีเซ็ตตำแหน่งการเลื่อน

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

โปรแกรมอ่านหน้าจอและเทคโนโลยีสิ่งอำนวยความสะดวกทำงานได้ดีที่สุดกับ HTML เชิงความหมาย ฟอร์มที่เพิ่มความสามารถแบบก้าวหน้าใช้ทั้งองค์ประกอบ <form>, <input> และ <button> จริง ซึ่งเทคโนโลยีสิ่งอำนวยความสะดวกเข้าใจได้โดยตรง JavaScript จะเพิ่มพื้นที่ประกาศแบบสดของ ARIA สำหรับแจ้งข้อผิดพลาด โดยเป็นการเสริมพื้นฐานที่เข้าถึงได้ ไม่ใช่การแทนที่

บนเครือข่ายที่ไม่เสถียร ชุด JavaScript อาจโหลดไม่สำเร็จ หน้าที่เพิ่มความสามารถแบบก้าวหน้ายังคงทำงานสำหรับกรณีใช้งานพื้นฐานได้ ความทนทานนี้สำคัญเป็นพิเศษสำหรับผู้ใช้การเชื่อมต่อมือถือในพื้นที่ที่มีสัญญาณครอบคลุมไม่ดี หรือในภูมิภาคที่สภาพเครือข่ายเปลี่ยนแปลงอย่างมาก

การเพิ่มความสามารถแบบก้าวหน้ามีคุณค่ามากที่สุดสำหรับฟอร์มที่ผู้ใช้ทั่วไปเข้าถึงได้ เช่น การสมัครสมาชิก การติดต่อ การค้นหา และการชำระเงิน แดชบอร์ดภายในที่มีการโต้ตอบซับซ้อนอาจไม่จำเป็นต้องใช้แนวทางนี้ ควรนำไปใช้อย่างมีจุดประสงค์ในบริบทที่การเข้าถึงผู้ใช้ได้มากที่สุดและความน่าเชื่อถือมีความสำคัญ เช่น หน้าโฆษณา การพาณิชย์อิเล็กทรอนิกส์ และขั้นตอนการเริ่มต้นใช้งานของผู้ใช้

การเพิ่มความสามารถแบบก้าวหน้าหมายถึงฟอร์มทำงานเป็น HTML POST ธรรมดาได้โดยไม่ต้องใช้ JavaScript การทำงานบนเซิร์ฟเวอร์ของ React รองรับสิ่งนี้โดยตรง: action={serverAction} เปิดให้ส่ง POST แบบเต็มหน้าได้ จากนั้นการทำให้หน้าโต้ตอบได้ของ React จะยกระดับฟอร์มให้เป็นการอัปเดตในหน้าเดิมแบบอะซิงโครนัสพร้อมสถานะกำลังดำเนินการ แนวทางนี้เป็นประโยชน์ต่อการเข้าถึง การปรับให้เหมาะกับเครื่องมือค้นหา และผู้ใช้ที่มีการเชื่อมต่อจำกัด ขณะเดียวกันก็ยังมอบประสบการณ์ JavaScript ที่ครบถ้วน