การคงธีมไว้และป้องกันหน้ากระพริบ

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

วิธีแก้คือใช้สคริปต์อินไลน์ใน document head ซึ่งทำงานแบบซิงโครนัสก่อนโค้ดอื่นทั้งหมด สคริปต์นี้จะอ่าน localStorage ทันทีและกำหนด data-theme ให้กับ document.documentElement เนื่องจากเป็นสคริปต์แบบบล็อกการทำงาน เบราว์เซอร์จึงกำหนดแอตทริบิวต์นี้ก่อนวาดเนื้อหาใด ๆ

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

สคริปต์แบบบล็อกการทำงานมีเนื้อหาน้อยที่สุด โดยอ่าน localStorage.getItem('theme') ตรวจสอบ window.matchMedia('(prefers-color-scheme: dark)').matches เป็นค่าทดแทน จากนั้นเรียก document.documentElement.setAttribute('data-theme', theme) ให้ครอบด้วยการจัดการข้อผิดพลาดแบบลองและดักจับ เผื่อ localStorage ไม่พร้อมใช้งานในการเรียกดูแบบส่วนตัว

ใน Next.js ให้ใช้คอมโพเนนต์ Script จาก next/script พร้อมกับ strategy="beforeInteractive" ภายใน _document.js กลยุทธ์ beforeInteractive จะแทรกสคริปต์ลงใน HTML ของหน้าเว็บก่อนที่ JavaScript ของหน้าจะทำงาน ทำให้ได้พฤติกรรมแบบบล็อกการทำงานเช่นเดียวกันในกระบวนการสร้างของ Next.js

ในโปรเจ็กต์ Vite หรือ Create React App ให้แก้ไข index.html โดยตรง และวางแท็กสคริปต์อินไลน์ไว้ใน head ก่อนสคริปต์อื่นทั้งหมด เนื่องจาก index.html เป็นจุดเริ่มต้นสำหรับเบราว์เซอร์ สคริปต์จึงทำงานก่อนที่ React จะเริ่มทำงาน ควรเขียนให้กระชับเพื่อให้มีขนาดต่ำกว่า 100 ไบต์

ในแอปที่เรนเดอร์ฝั่งเซิร์ฟเวอร์ เซิร์ฟเวอร์สามารถอ่านธีมจากคุกกี้ที่ส่งมาพร้อมคำขอ จากนั้นเซิร์ฟเวอร์จะกำหนด data-theme ใน HTML ที่เรนเดอร์แล้วก่อนส่งไปยังเบราว์เซอร์ วิธีนี้ป้องกันการกะพริบฝั่งไคลเอ็นต์ได้ทั้งหมด เพราะธีมที่ถูกต้องอยู่ในไบต์แรกของ HTML

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

หากต้องการตรวจสอบว่าวิธีแก้ทำงาน ให้เปิด Chrome DevTools ไปที่แท็บเครือข่าย และจำกัดความเร็วไว้ที่ Slow 3G จากนั้นโหลดหน้าใหม่ หากเห็นธีมเปลี่ยนระหว่างการโหลด แสดงว่ายังแก้ปัญหาการกะพริบไม่สำเร็จ เมื่อมีสคริปต์แบบบล็อกการทำงาน การวาดครั้งแรกควรแสดงธีมที่ถูกต้องอยู่แล้ว แม้การเชื่อมต่อจะช้า

หากสถานะเริ่มต้นของ React กำหนดเป็นธีมสว่าง แต่สคริปต์แบบบล็อกการทำงานกำหนดธีมมืดก่อนการไฮเดรต React อาจแสดงคำเตือนเกี่ยวกับความไม่ตรงกันในการไฮเดรต หลีกเลี่ยงปัญหานี้ด้วยการเริ่มต้นสถานะธีมของ React โดยอ่าน localStorage ในระหว่างการเรนเดอร์ครั้งแรกด้วย เพื่อให้ HTML ที่ React เรนเดอร์ตรงกับสถานะ DOM ที่สคริปต์แบบบล็อกการทำงานกำหนดไว้

Storybook และสภาพแวดล้อมการทดสอบจะไม่โหลด index.html ของคุณ ดังนั้นสคริปต์แบบบล็อกการทำงานจึงไม่ทำงาน ให้จัดเตรียมตัวตกแต่งหรือการตั้งค่าการทดสอบที่กำหนดแอตทริบิวต์ data-theme เริ่มต้นในสภาพแวดล้อมเหล่านั้น วิธีนี้ป้องกันความไม่สอดคล้องทางภาพที่ทำให้สับสนเมื่อพัฒนาคอมโพเนนต์แบบแยกอิสระ

ต้องใช้สคริปต์ประเภทใดในส่วนหัวของเอกสารเพื่อป้องกันการกะพริบของธีมที่ไม่ถูกต้อง

ป้องกันการกะพริบของธีมที่ไม่ถูกต้องด้วยการแทรกสคริปต์อินไลน์แบบบล็อกการทำงานขนาดเล็กในส่วนหัวของเอกสาร ซึ่งอ่าน localStorage และกำหนด data-theme ก่อนการวาดใด ๆ ใน Next.js ให้ใช้ strategy="beforeInteractive" ส่วน Vite/CRA ให้เพิ่มสคริปต์โดยตรงใน index.html แอป SSR สามารถอ่านคุกกี้เพื่อกำหนดธีมฝั่งเซิร์ฟเวอร์ได้