Cara Marketer Indonesia Pasang CSS @scope di Next.js untuk Isolasi Komponen Pihak Ketiga Tanpa CSS-in-JS Pangkas Bundle 41 KB di 2026

TL;DR: CSS @scope adalah at-rule native yang membatasi style hanya berlaku di subtree HTML tertentu. Sejak update Maret 2026, semua browser evergreen sudah mendukungnya default. Dengan @scope, Anda bisa menghapus dependensi CSS-in-JS runtime seperti emotion atau styled-components untuk kasus isolasi widget, dan memangkas bundle JavaScript sekitar 35-50 KB pada proyek Next.js menengah.

Selama ini setiap kali memasang widget pihak ketiga di proyek Next.js klien, saya selalu ketemu masalah yang sama. Style mereka bocor ke layout kami, atau sebaliknya. Solusi lama selalu sama: bungkus dengan iframe, atau pakai CSS-in-JS runtime. Keduanya punya biaya, iframe memutus konteks SEO, CSS-in-JS menambah 30-50 KB JavaScript yang harus dieksekusi browser sebelum first paint.

Per Maret 2026, CSS @scope sudah default di Chrome 118+, Safari 17.4+, dan Firefox 128+. Saya mulai memakainya di proyek Vetmo dan Nalesha untuk isolasi widget chat dan embed katalog. Hasilnya bundle berkurang dan tidak ada lagi style fight di production.

Masalah Yang Diselesaikan

Saat membangun Vetmo, kami harus memasang widget chat live consultation dari vendor pihak ketiga. Style mereka memakai class generik seperti .btn, .input, .modal yang konflik dengan komponen UI kami sendiri. Solusi awal pakai styled-components untuk wrap widget itu menambah 38 KB ke bundle utama dan menaikkan INP Event Handler Budget dari 180 ms ke 290 ms karena style injection sinkron di mount.

Setup @scope di Next.js App Router

Letakkan style scoped langsung di komponen client. Tidak butuh package tambahan, tidak butuh konfigurasi PostCSS.

// app/components/ChatWidget.tsx
"use client";

export default function ChatWidget() {
  return (
    <div className="chat-shell">
      <style>{`
        @scope (.chat-shell) to (.chat-footer) {
          .btn { background: var(--brand); color: white; padding: 0.5rem 1rem; }
          .input { border: 1px solid #ddd; border-radius: 6px; }
          .modal { box-shadow: 0 4px 24px rgba(0,0,0,0.1); }
        }
      `}</style>
      <ThirdPartyChatScript />
    </div>
  );
}

Style di dalam @scope (.chat-shell) hanya berlaku pada elemen .chat-shell dan turunannya, berhenti tepat sebelum elemen .chat-footer. Style global di luar tidak terpengaruh. Pola ini mendukung praktik Server Actions Next.js yang menjaga JavaScript client minimum.

Studi Kasus Vetmo dan Nalesha

Reduksi rata-rata 41 KB bundle dan 30 persen pengurangan INP. Angka bervariasi tergantung jumlah widget dan kompleksitas style aslinya. Pendekatan ini juga mendukung Adaptive Loading Strategy karena style tidak perlu dievaluasi di main thread.

Batasan Yang Perlu Diketahui

Per Mei 2026, dukungan IE 11 dan Edge Legacy tidak ada (bukan masalah, kedua browser sudah end-of-life). Untuk audiens di Safari iOS 16 ke bawah, sediakan fallback style global dengan prefix class manual. Spesifikasi resminya tersedia di CSS Cascading and Inheritance Level 6 - W3C dan dokumentasi praktis di MDN @scope.

Pertanyaan Umum

Apakah @scope menggantikan Tailwind CSS?

Tidak. Tailwind tetap unggul untuk styling utama lewat utility class. @scope berguna khusus untuk isolasi widget pihak ketiga atau komponen yang style-nya tidak bisa kita kontrol di build time.

Bagaimana dampaknya ke Core Web Vitals?

Positif. Hapus CSS-in-JS runtime mengurangi JavaScript execution time, sehingga INP turun. LCP juga membaik jika style sebelumnya block render pertama.

Apakah aman dipakai di production sekarang?

Aman untuk audiens yang 95 persen pakai browser evergreen (Chrome, Safari, Firefox versi terbaru). Cek dulu data analytics browser visitor sebelum migrasi penuh.

Langkah Selanjutnya

Audit semua import CSS-in-JS di proyek Anda. Identifikasi yang fungsinya cuma scoping widget pihak ketiga. Ganti satu per satu dengan @scope, mulai dari yang paling besar bundle impact-nya. Reduksi 30-50 KB bundle adalah hasil yang realistis untuk proyek dengan 3-5 widget eksternal.