𝗠𝘆 𝗙𝗼𝗼𝘁𝗯𝗮𝗹𝗹 𝗔𝗽𝗽 𝗪𝗼𝗿𝗸𝗲𝗱 𝗣𝗲𝗿𝗳𝗲𝗰𝘁𝗹𝘆 𝗨𝗻𝘁𝗶𝗹 𝗠𝗮𝘁𝗰𝗵𝗱𝗮𝘆 𝗦𝘁𝗮𝗿𝘁𝗲𝗱

การสร้างแอปฟุตบอลดูเหมือนจะเป็นเรื่องง่ายในตอนแรก

ผมวางแผนที่จะดึงข้อมูลการแข่งขัน แสดงทีม แสดงคะแนน และรีเฟรชทุกๆ ไม่กี่วินาที มันทำงานได้ดีในช่วงทดสอบ ผมใช้เพียงสองแท็บและข้อมูลการแข่งขันตัวอย่างไม่กี่คู่ ทุกอย่างดูปกติดี

จนกระทั่งวันแข่งขันที่วุ่นวายวันแรกมาถึง

ผู้ใช้หลายร้อยคนเปิดแอปขึ้นมาพร้อมๆ กัน ทำให้เกิดการส่งคำขอ (Requests) ที่ทับซ้อนกัน คะแนนบางส่วนดูเหมือนจะวิ่งย้อนกลับ แอปดึงข้อมูลชุดเดียวกันแยกกันสำหรับผู้เข้าชมแต่ละคน

ผมได้เรียนรู้ว่าแอปที่ใช้งานจริง (live app) ไม่ใช่แค่เว็บไซต์ที่เชื่อมต่อกับ API แต่มันคือระบบการซิงโครไนซ์ข้อมูล (data synchronization system)

นี่คือข้อผิดพลาดที่ผมทำ และวิธีที่ผมแก้ไขมัน:

  • หลีกเลี่ยงการทำ polling เฉพาะฝั่ง client เท่านั้น เวอร์ชันแรกของผมทำให้ทุกเบราว์เซอร์ส่งคำขอข้อมูลทุกๆ 5 วินาที ผู้ใช้ 1 คน = 12 คำขอต่อนาที ผู้ใช้ 1,000 คน = 12,000 คำขอต่อนาที คำขอส่วนใหญ่เป็นการขอข้อมูลชุดเดียวกันเป๊ะๆ

  • ใช้การส่งคำขอจากฝั่ง server ผมย้ายการเรียก API ไปไว้ที่ server ซึ่งช่วยให้คุณควบคุมสิ่งเหล่านี้ได้: • API credentials • Caching • Rate limiting • Error handling • Response formatting

อย่าใช้ API keys ในโค้ดฝั่ง client เด็ดขาด เพราะมันไม่ปลอดภัยและอาจมีค่าใช้จ่ายสูงหากมีคนขโมยคีย์ของคุณไป

  • สร้าง mapping layer ผมเลิกส่งข้อมูลดิบจาก API ไปยัง component โดยตรง หากผู้ให้บริการเปลี่ยนชื่อฟิลด์ UI ของผมก็จะพัง ตอนนี้ผมใช้วิธี map ข้อมูลจากผู้ให้บริการให้เป็นรูปแบบภายในของผมเองก่อน วิธีนี้ช่วยให้ UI ของผมมีความเสถียร

  • ใช้ Server Components เพื่อความรวดเร็ว แทนที่จะแสดงหน้าจอโหลด (loading screen) ผมใช้วิธีโหลดข้อมูลการแข่งขันเริ่มต้นบน server ทำให้ผู้ใช้เห็นเนื้อหาได้ทันที

  • ใช้ smart polling แอปไม่ควรทำการรีเฟรชหากไม่มีการแข่งขันที่กำลังดำเนินอยู่ ผมจึงเพิ่มการตรวจสอบเพื่อหยุด polling เมื่อการแข่งขันจบลง วิธีนี้ช่วยประหยัดทรัพยากรของ server ได้มหาศาล

  • แก้ไขปัญหา race conditions บางครั้ง Request B อาจส่งข้อมูลกลับมาถึงก่อน Request A ทำให้คะแนนดูเหมือนวิ่งย้อนกลับ ผมจึงใช้ AbortController เพื่อยกเลิกคำขอเก่าก่อนที่จะเริ่มคำขอใหม่

  • จัดการข้อผิดพลาดอย่างเหมาะสม (Handle errors gracefully) หากการรีเฟรชล้มเหลว อย่าแสดงหน้าจอว่างเปล่า ให้แสดงข้อมูลล่าสุดที่ดึงมาสำเร็จค้างไว้ คะแนนที่ล่าช้าไป 15 วินาทียังดีกว่าไม่มีคะแนนแสดงเลย

ตัว Demo ต้องการเพียงแค่การแสดงข้อมูล แต่ผลิตภัณฑ์ที่ใช้งานจริงต้องจัดการทั้งเรื่อง caching, security และ state

คุณเคยสร้างแอปที่ใช้งานจริงไหม? มีอะไรพังบ้างเมื่อผู้ใช้จริงเข้ามาใช้งาน?

Source: https://dev.to/mihailove123/my-football-app-worked-perfectly-until-matchday-started-3i59