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

Membangun aplikasi sepak bola awalnya tampak mudah.

Saya berencana untuk mengambil data pertandingan, menampilkan tim, menampilkan skor, dan melakukan penyegaran setiap beberapa detik. Semuanya berjalan lancar saat pengujian. Saya menggunakan dua tab dan beberapa contoh pertandingan. Semuanya tampak baik-baik saja.

Lalu, hari pertandingan pertama yang sibuk tiba.

Ratusan pengguna membuka aplikasi secara bersamaan. Permintaan (requests) saling tumpang tindih. Beberapa skor tampak bergerak mundur. Aplikasi mengambil data yang sama secara terpisah untuk setiap pengunjung.

Saya belajar bahwa aplikasi live bukan sekadar situs web yang terhubung ke API. Ini adalah sebuah sistem sinkronisasi data.

Berikut adalah kesalahan yang saya buat dan cara saya memperbaikinya:

  • Hindari polling hanya di sisi klien Versi pertama saya membuat setiap browser meminta data setiap lima detik. 1 pengguna = 12 permintaan per menit. 1.000 pengguna = 12.000 permintaan per menit. Sebagian besar permintaan meminta data yang persis sama.

  • Gunakan permintaan di sisi server Saya memindahkan panggilan API ke server. Ini memberi Anda kendali atas: • Kredensial API • Caching • Rate limiting • Penanganan error • Pemformatan respons

Jangan pernah menggunakan kunci (keys) di kode sisi klien. Ini tidak aman dan mahal jika seseorang mencuri kunci Anda.

  • Buat lapisan pemetaan (mapping layer) Saya berhenti meneruskan data API mentah secara langsung ke komponen saya. Jika penyedia mengubah nama field, UI saya rusak. Sekarang, saya memetakan data penyedia ke format internal saya sendiri terlebih dahulu. Ini menjaga UI saya tetap stabil.

  • Gunakan Server Components untuk kecepatan Alih-alih menampilkan layar pemuatan (loading screen), saya memuat pertandingan awal di server. Pengguna langsung melihat konten.

  • Implementasikan polling cerdas Aplikasi tidak boleh melakukan penyegaran jika tidak ada pertandingan yang sedang berlangsung. Saya menambahkan pemeriksaan untuk menghentikan polling saat pertandingan selesai. Ini menghemat sumber daya server dalam jumlah besar.

  • Perbaiki race conditions Terkadang Permintaan B kembali sebelum Permintaan A. Ini membuat skor tampak seperti bergerak mundur. Saya menggunakan AbortController untuk membatalkan permintaan lama sebelum memulai yang baru.

  • Tangani error dengan baik Jika penyegaran gagal, jangan tampilkan layar kosong. Tetap tampilkan data terakhir yang berhasil. Skor yang berusia lima belas detik lebih baik daripada tidak ada skor sama sekali.

Sebuah demo hanya perlu menampilkan data. Produk nyata harus mengelola caching, keamanan, dan state.

Pernahkah Anda membangun aplikasi live? Apa yang rusak saat pengguna nyata datang?

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