ในโลกของการพัฒนาเว็บสมัยใหม่ นักพัฒนามักจะเลือกใช้ไลบรารีจัดการสถานะที่ซับซ้อนเช่น Redux หรือ Zustand ในขณะที่มองข้ามคุณลักษณะที่สง่างามและทรงพลังที่สุดอย่างหนึ่งของเว็บ นั่นก็คือ URL ที่ดูเรียบง่าย การอภิปรายในชุมชนเมื่อเร็วๆ นี้ ได้จุดประกายความสนใจในการใช้ URL เป็นตัวเก็บสถานะระดับแรกใหม่ ทำให้เห็นทั้งประโยชน์อันมหาศาลและความท้าทายในทางปฏิบัติของแนวทางนี้
การค้นพบใหม่ของการจัดการสถานะผ่าน URL
บทสนทนาเริ่มต้นเมื่อนักพัฒนารายหนึ่งแบ่งปันประสบการณ์กับการใช้ PrismJS ไลบรารียอดนิยมสำหรับเน้นไวยากรณ์โค้ด พวกเขาค้นพบว่าการกำหนดค่าทั้งหมดของพวกเขา - ธีม ภาษา และปลั๊กอิน - ถูกเข้ารหัสอย่างสมบูรณ์ใน URL เดียว ช่วงเวลาแห่งความตระหนักรู้นี้ได้จุดประกายการอภิปรายในวงกว้างเกี่ยวกับวิธีที่ URL สามารถเก็บสถานะแอปพลิเคชันได้โดยไม่ต้องใช้ฐานข้อมูล คุกกี้ หรือ localStorage
สมาชิกในชุมชนต่างรีบแสดงความคิดเห็นด้วยประสบการณ์ของตนเอง นักพัฒนารายหนึ่งระบุว่าพวกเขาพยายามบันทึกสถานะให้ได้มากที่สุดใน URL บางครั้งลงลึกถึงตำแหน่งการเลื่อนหน้าจอ แนวปฏิบัตินี้สร้างประสบการณ์ผู้ใช้ที่คาดเดาได้มากขึ้น ซึ่งการรีเฟรชหน้าหรือการแชร์ลิงก์จะรักษาบริบทไว้ ความหงุดหงิดจากการสูญเสียสถานะแอปพลิเคชันเมื่อรีเฟรชหน้า ปรากฏเป็นประเด็นร่วม โดยผู้ใช้แสดงความรำคาญเมื่อเว็บไซต์ไม่สามารถรักษาตำแหน่งของพวกเขาไว้ได้
รูปแบบการนำไปใช้ในทางปฏิบัติ
นักพัฒนาได้แบ่งปันแนวทางต่างๆ ในการเข้ารหัสสถานะใน URL รูปแบบที่พบบ่อยที่สุดคือการใช้พารามิเตอร์ query สำหรับตัวกรอง การกำหนดค่า และเกณฑ์การค้นหา ผู้แสดงความคิดเห็นหนึ่งคนได้เน้นย้ำถึงเว็บไซต์เรดาร์ของ National Weather Service ซึ่งเข้ารหัส base64 การกำหนดค่าที่ซับซ้อนของแผนที่ รวมถึงพิกัด ระดับการซูม และตัวเลือกการแสดงผล โดยตรงใน URL
การอภิปรายเผยให้เห็นข้อควรพิจารณาทางเทคนิคหลายประการ นักพัฒนาต้องเลือกระหว่าง pushState และ replaceState สำหรับการจัดการประวัติเบราว์เซอร์ โดยผู้แสดงความคิดเห็นหนึ่งคนระบุว่า PrismJS จะแทนที่รายการประวัติปัจจุบันเพื่อหลีกเลี่ยงไม่ให้ประวัติเบราว์เซอร์รก นอกจากนี้ยังมีเรื่องความท้าทายเกี่ยวกับขีดจำกัดความยาวของ URL แม้ว่าคนส่วนใหญ่จะเห็นตรงกันว่าขีดจำกัดในทางปฏิบัติที่ 2,000-8,000 ตัวอักษรนั้นเพียงพอสำหรับการใช้งานส่วนใหญ่แล้วก็ตาม
หากการที่คนอื่นคลิก URL นี้แล้วควรเห็นสถานะเดียวกัน สถานะนั้นควรอยู่ใน URL หากไม่ใช่ ให้ใช้แนวทางการจัดการสถานะอื่นแทน
รูปแบบ URL State ทั่วไป
- Query Parameters: เหมาะสำหรับตัวกรอง ตัวเลือก และการกำหนดค่า (เช่น
?category=electronics&sort=price) - Path Segments: มีประโยชน์สำหรับการนำทางแบบลำดับชั้น (เช่น
/products/123/reviews) - Anchor/Fragment: เหมาะสำหรับการนำทางภายในหน้าเดียวและการกำหนดเส้นทางฝั่งไคลเอนต์ (เช่น
section-heading) - Base64 Encoding: สำหรับข้อมูลที่มีโครงสร้างซับซ้อนภายในขอบเขตความยาว URL ที่เหมาะสม
การประยุกต์ใช้และประโยชน์ในโลกจริง
สมาชิกในชุมชนได้แบ่งปันตัวอย่างที่น่าสนใจของการจัดการสถานะผ่าน URL ในการปฏิบัติจริง คุณสมบัติการเน้นบรรทัดของ GitHub อนุญาตให้ลิงก์ไปยังส่วนโค้ดเฉพาะได้โดยตรง Google Maps เข้ารหัสพิกัด ระดับการซูม และประเภทของแผนที่ใน URLs เครื่องมือออกแบบเช่น Figma ใช้ URLs เพื่อรักษาตำแหน่งผืนผ้าใบและองค์ประกอบที่เลือกไว้ เว็บไซต์อีคอมเมิร์ซมักใช้พารามิเตอร์ URL สำหรับตัวกรองการค้นหาและตัวเลือกการเรียงลำดับ
ประโยชน์ขยายไปไกลกว่าประสบการณ์ผู้ใช้ URLs ทำหน้าที่เป็นคีย์แคชตามธรรมชาติ ทำให้ประสิทธิภาพ CDN ดีขึ้น เครื่องมือวิเคราะห์สามารถติดตามการเดินทางของผู้ใช้ได้โดยไม่ต้องมีการติดตั้งเครื่องมือเพิ่มเติม ที่สำคัญที่สุด URLs มอบความสามารถในการแบ่งปันและบุ๊กมาร์ก ซึ่งโซลูชันการจัดการสถานะอื่นๆ ไม่สามารถเทียบได้
ตัวอย่างในโลกจริง
- GitHub: การไฮไลต์บรรทัดในไฟล์โค้ด
- Google Maps: พิกัด ระดับการซูม และประเภทของแผนที่
- Figma: ตำแหน่งของ Canvas ระดับการซูม องค์ประกอบที่เลือก
- E-commerce: ตัวกรองการค้นหา ตัวเลือกการเรียงลำดับ การแบ่งหน้า
- PrismJS: การกำหนดค่าการไฮไลต์ syntax แบบครบถ้วน
ความท้าทายและการแลกเปลี่ยน
ไม่ใช่ข้อเสนอแนะทั้งหมดจากชุมชนจะเป็นไปในทางบวก นักพัฒนาบางส่วนกังวลว่าสถานะใน URL อาจกลายเป็น API สาธารณะที่จำกัดการพัฒนาในอนาคต เมื่อสถานะแอปพลิเคชันพัฒนาขึ้น โครงสร้าง URL อาจต้องมีการกำหนดเวอร์ชันหรือกลยุทธ์การย้ายข้อมูล นอกจากนี้ยังมีความเสี่ยงในการเปิดเผยข้อมูลสำคัญ เนื่องจาก URLs ปรากฏในประวัติเบราว์เซอร์ บันทึกของเซิร์ฟเวอร์ และส่วนหัว referrer
พฤติกรรมการเติมข้อความอัตโนมัติของเบราว์เซอร์ ปรากฏเป็นอีกหนึ่งความกังวล ผู้แสดงความคิดเห็นหนึ่งคนระบุว่า URLs ที่ลงเอยในประวัติเบราว์เซอร์ อาจทำให้เกิดสถานะที่ไม่พึงประสงค์เป็นครั้งคราว เมื่อการเติมข้อความอัตโนมัติแนะนำการกำหนดค่าที่ล้าสมัย ความตึงเครียดระหว่างสถานะที่คงอยู่และประวัติเบราว์เซอร์ที่สะอาด ต้องการการพิจารณาอย่างรอบคอบ
แนวทางปฏิบัติที่ดีสำหรับ URL State
- ตัวเลือกที่เหมาะสม: คำค้นหา, การแบ่งหน้า, โหมดการแสดงผล, ช่วงวันที่, รายการที่เลือก
- ตัวเลือกที่ไม่เหมาะสม: ข้อมูลที่ละเอียดอ่อน, สถานะ UI ชั่วคราว, ข้อมูลฟอร์มที่กำลังกรอก
- การจัดการประวัติ: ใช้
pushStateสำหรับการนำทาง, ใช้replaceStateสำหรับการปรับแต่ง - ค่าเริ่มต้น: หลีกเลี่ยงการใส่ค่าพารามิเตอร์เริ่มต้นลงใน URL
อนาคตของการออกแบบ URL
ผู้แสดงความคิดเห็นหลายคนแสดงความเห็นว่าการออกแบบ URL ควรได้รับการปฏิบัติเป็นส่วนหนึ่งของการออกแบบประสบการณ์ผู้ใช้ (UX) แม้ว่าผู้ออกแบบ UX คนหนึ่งจะระบุว่ามุมมองนี้ไม่ always ได้รับการยอมรับจากทีมวิศวกรรมและทีมผลิตภัณฑ์เสมอไป ก็ตาม มีเสียงเรียกร้องให้กำหนดมาตรฐานพารามิเตอร์ query ที่มีความหมายทั่วไปทั่วทั้งเว็บไซต์ เพื่อลดการสร้างสิ่งเดิมซ้ำและปรับปรุงความสม่ำเสมอ
นักพัฒนาบางคนเสนอเทคนิคการบีบอัดที่เป็นนวัตกรรมใหม่ โดยแนะนำว่าดิกชันนารีแบบกำหนดเองสามารถเข้ารหัสสถานะที่ซับซ้อนได้อย่างมีประสิทธิภาพมากขึ้น คนอื่นๆ แบ่งปันโครงการงานอดิเรกที่สาธิตการประยุกต์ใช้ขั้นสูง เช่น การเก็บงานศิลปะพิกเซล หรือสถานะเกมทั้งหมดใน URLs การทดลองเหล่านี้แสดงให้เห็นถึงศักยภาพที่ยังไม่ได้ใช้ประโยชน์ของการจัดการสถานะแบบใช้ URL
ฉันทามติของชุมชนชี้ให้เห็นว่าในขณะที่การจัดการสถานะผ่าน URL ต้องการการนำไปใช้อย่างรอบคอบ แต่ประโยชน์ต่อประสบการณ์ผู้ใช้นั้นมีมากมาย เมื่อแอปพลิเคชันเว็บมีความซับซ้อนมากขึ้น การทบทวนคุณลักษณะพื้นฐานของเว็บนี้อีกครั้ง อาจนำไปสู่แอปพลิเคชันที่ยืดหยุ่นกว่า แบ่งปันได้ง่ายกว่า และเป็นมิตรกับผู้ใช้มากขึ้น การอภิปรายนี้เน้นย้ำว่าบางครั้งโซลูชันที่ดีที่สุดอาจไม่ใช่ไลบรารีใหม่ล่าสุด แต่เป็นเทคโนโลยีพื้นฐานที่ขับเคลื่อนเว็บมาตั้งแต่เริ่มต้น
อ้างอิง: Your URL Is Your State