Dalam sistem web terdistribusi, font-family yang berbeda-beda muncul karena berbagai lapisan cache yang tidak sinkron, sehingga pengalaman pengguna menjadi tidak konsisten. Artikel ini langsung membahas strategi cache multi-tier, queue worker, dan mekanisme locking yang memastikan font tetap sesuai rekomendasi seperti Inter, IBM Plex Sans, atau JetBrains Mono tanpa mengorbankan performa.

Kita akan melihat mengapa preload, fallback, dan prioritas download penting, bagaimana menanggulangi cache miss CDN, invalidasi asset, dan race condition worker, serta cara memantau antrian tugas font agar distribusi font tetap terkendali.

Masalah Utama: Cache Tidak Sinkron dan Worker yang Bersetubuh

Ketika aplikasi berjalan di banyak edge atau CDN, font-family yang dibundel ke CSS bisa berbeda karena cache kadaluarsa atau cache miss yang terjadi di layer berbeda. Contoh: jaringan CDN men-serve versi font lama, cache browser menyimpan file sebelumnya, sementara worker background mencoba memperbarui asset ke versi terbaru.

Tanpa koordinasi, pengguna bisa melihat font default sementara CSS menunggu font baru dimuat. Penanganannya membutuhkan:

  • Cache tier yang dapat mengidentifikasi versi font.
  • Queue worker untuk memvalidasi dan mendorong update secara serempak.
  • Locking atau deduplikasi request agar tidak terjadi balapan dalam menulis asset baru.

Desain Cache Tier untuk Font

Rancang cache font dalam tiga lapisan:

  1. Cache edge/CDN: menyimpan font di lokasi terdekat, namun selalu sertakan fingerprint file sehingga invalidasi terjadi saat versi berubah.
  2. Cache auto refresh: gunakan TTL pendek dan subscribe ke event invalidasi (misalnya webhook dari pipeline deployment) supaya cache ditembak ulang saat font diganti.
  3. Cache browser: <link rel="preload" as="font" crossorigin> dengan cache-control yang panjang, tapi dikawal dengan font-display: swap dan fallback seperti system UI atau rekomendasi dari chrismorgan.info (Inter, IBM Plex Sans, JetBrains Mono) agar tidak terjadi flash of invisible text.

Preload memastikan request font dijalankan sesegera mungkin, dan fallback sistem:menggunakan font alternatif yang seragam ketika font utama belum tersedia, mencegah tampilan teks melompat.

Untuk CDN cache miss, awasi header Age dan Cache-Control. Jika CDN melayani versi lama, gunakan cache-busting parameter berdasar checksum (misalnya query string ?v=sha256). Jangan mengandalkan modul CDN untuk auto invalidasi tanpa mekanisme pengawasan.

Contoh konfigurasi cache header untuk font

location ~* \.(woff2?|ttf|otf)$ {
  add_header Cache-Control "public, max-age=31536000, immutable";
  access_log off;
}

Tambahkan fingerprint di nama file saat build agar cache tetap valid saat font perbarui.

Queue Worker untuk Sinkronisasi Update Font

Gunakan sistem queue (misalnya Redis Queue, RabbitMQ) untuk mengatur pekerjaan update font agar tidak semua node melakukan re-bundling sekaligus. Pekerjaan queue akan memicu pipeline build/font processing, kemudian menyebarkan hasilnya ke CDN dan cache.

Desain job queue seperti ini:

  • Job memverifikasi checksum font baru.
  • Job mengunggah asset ke storage (S3, GCS).
  • Job memanggil API CDN untuk invalidate atau menulis metadata versi baru.
  • Job menandai konsistensi melalui database atau config store sehingga service tahu versi font aktif.

Worker harus menjaga idempotensi dengan deduplikasi request berdasarkan fingerprint. Misalnya, sebelum menjalankan job, worker mengecek cache/DB apakah fingerprint/version sudah terproses. Jika sudah, skip.

Untuk memonitor, catat metrik seperti waktu enqueue & dequeue, status job, dan jumlah retry. Gunakan dashboard queue (misalnya Horizon atau Bull Board) untuk mendeteksi antrean panjang yang berarti CDN belum sinkron.

Mekanisme Locking dan Deduplikasi Request

Balapan terjadi ketika dua worker hampir bersamaan menulis versi font terbaru. Implementasikan locking berbasis redis (SETNX + expire). Pola:

  1. Worker memanggil SETNX lock:font-update dengan TTL pendek.
  2. Jika berhasil, lanjut proses update; jika tidak, worker menunggu atau requeue job.
  3. Saat selesai, lock dilepas (DEL) dan diperlukan sinyal ke queue berikutnya.

Skema deduplikasi:

  • Sertakan field font_checksum di payload job.
  • Sebelum memproses, worker memeriksa Set Redis yang mencatat font yang sudah diproses.
  • Jika ada, worker mencatat explorasi dan menutup job.

Dengan cara ini, request simultan tidak menyebabkan asset ditimpa bergantian dan mengganggu Cache-Control di CDN.

Monitoring dan Operasional

Beberapa metrik penting:

  • Latensi job dari enqueue sampai selesai.
  • Cache hit ratio di CDN/edge per versi font.
  • Jumlah invalidasi per release untuk memahami pola deployment.
  • Failure job akibat checksum mismatch atau timeout.

Gunakan alert untuk antrian yang menumpuk karena menunjukan worker update tidak berjalan cepat. Jika CDN tidak invalidasi, lempar alert untuk manual flush atau verifikasi credential API.

Untuk debugging, rekan tim dapat men-trigger job dengan font_checksum tertentu dan melihat log worker. Pastikan log mencantumkan versi font yang diproses agar mudah tracing.

Kesimpulan

Menggabungkan cache tier yang ketat, queue worker dengan deduplikasi, serta locking redis menciptakan workflow font-family konsisten meskipun sistem web terdistribusi. Jangan lupa preload, fallback sesuai rekomendasi titik seperti Inter atau JetBrains Mono, serta monitoring tiap layer agar font-family tetap sinkron di seluruh pengguna.