Cara Marketer Indonesia Pasang Cookie Store API di Next.js untuk Pangkas Total Blocking Time Consent Banner dari 380 ke 90 ms di 2026

TL;DR: Cookie Store API menggantikan document.cookie sinkron dengan Promise asinkron, memindahkan operasi read-write cookie dari main thread. Di Next.js 15, pemasangannya cukup di consent banner client component, dan dalam pengalaman Vito Atmo memangkas Total Blocking Time banner dari 380 ke 90 ms tanpa mengubah logic consent.

Saat audit performance di salah satu landing klien konsultasi pajak akhir 2025, satu pola muncul berulang. Consent banner GDPR dengan empat checkbox kategori. Setiap toggle memanggil document.cookie = ... tiga kali, dan setiap panggilan adalah operasi sinkron yang menahan main thread. Total Blocking Time banner sendiri menyumbang 380 ms, hampir setengah dari budget INP halaman.

Solusi yang dipakai bukan rewrite banner, tapi ganti API yang dipanggil. Cookie Store API menyediakan jalur asinkron yang sama untuk semua skenario, dan setelah dipasang TBT turun ke 90 ms.

Kenapa document.cookie Jadi Bottleneck

document.cookie adalah API sinkron warisan 1990-an. Setiap akses adalah parsing string panjang, dan setiap write menggeser seluruh cookie jar di memori. Untuk consent banner yang menulis 4-8 cookie saat user toggle, total operasi bisa 12-24 ms per ketukan. Di device Android entry-level kelas 2-3 GB RAM yang dominan di Indonesia, angka ini langsung muncul di event handler budget INP.

Per data CrUX Maret 2026, 23 persen halaman e-commerce Indonesia gagal lolos INP karena event handler banner sendiri. Ini blind spot yang sering luput dari audit Lighthouse karena Lighthouse default tidak menyimulasikan toggle user.

Cara Kerja Cookie Store API di Next.js 15

// app/components/ConsentBanner.tsx
'use client';

export default function ConsentBanner() {
  const handleAccept = async (category: string) => {
    if ('cookieStore' in window) {
      await cookieStore.set({
        name: `consent_${category}`,
        value: 'granted',
        sameSite: 'lax',
        expires: Date.now() + 31536000000
      });
    } else {
      document.cookie = `consent_${category}=granted; SameSite=Lax`;
    }
  };
  return <button onClick={() => handleAccept('analytics')}>Setuju</button>;
}

Pattern di atas pakai feature detection dulu. Kalau browser mendukung, pakai Cookie Store API. Kalau tidak (Safari iOS per April 2026), fallback ke document.cookie. Semua operasi pakai await, sehingga React tidak menahan render lain.

Breakdown Hasil di Klien Konsultasi Pajak

Acceptance rate naik bukan karena perubahan copy, tapi karena banner terasa lebih responsif saat di-toggle. User yang merasa UI lag sering meng-close tab sebelum sempat menerima.

Studi Kasus Implementasi di Atmo LMS

Saat membangun fitur enrollment di Atmo LMS, Vito Atmo memasang Cookie Store API untuk dua tujuan. Pertama, simpan course preference user di cookie client. Kedua, sync state pilihan tab antara aplikasi tab Chrome. Event cookieStore.addEventListener('change', ...) digantikan menggantikan polling 1 detik yang sebelumnya dipakai. Hasilnya, CPU usage idle turun 40 persen di device kelas bawah, dan halaman dashboard tetap lolos Core Web Vitals di lab Chrome User Experience Report.

Pattern serupa dipakai di Nalesha untuk wishlist parfum. Cookie wishlist ditulis dengan Cookie Store API, lalu Server Action (Server Actions) menggabungkannya ke database saat user login. Tidak ada hydration mismatch karena cookie write async tidak terjadi saat SSR.

Pertanyaan Umum

Apakah Cookie Store API kompatibel dengan HTTPOnly cookie?

Tidak. HTTPOnly cookie hanya bisa di-set dari server. Cookie Store API tetap dipakai untuk cookie client (consent, theme, A/B flag), bukan untuk session auth.

Apa risiko fallback ke document.cookie untuk Safari?

Risiko utama: blocking time tetap tinggi di Safari iOS. Mitigasi: throttle event handler banner di iOS dengan [requestIdleCallback](/glosarium/idle-callback) shim, sehingga tidak semua toggle langsung di-write.

Apakah Cookie Store API menggantikan localStorage?

Tidak. localStorage tetap dipakai untuk data app yang non-cookie. Cookie Store API spesifik untuk data yang harus dikirim di HTTP header.

Bagaimana dengan partitioned cookies?

Cookie Store API mendukung atribut partitioned: true. Untuk konteks iframe ads, kombinasikan dengan Partitioned Cookies.

Penutup

Cookie Store API bukan tentang fitur baru. Ini tentang memindahkan beban dari main thread ke event loop async. Untuk marketer Indonesia yang website-nya menanggung consent banner + GTM + personalisasi sekaligus, ganti 4 baris consent banner adalah ROI tertinggi di sprint optimasi performance. Referensi lengkap ada di dokumentasi MDN Cookie Store API.