{"slug":"solving-disqus-comment-fragmentation","locale":"id","isFallback":false,"translationAvailable":["en","id"],"translationUrls":{"en":"/api/notes/solving-disqus-comment-fragmentation?locale=en","id":"/api/notes/solving-disqus-comment-fragmentation?locale=id"},"title":"Studi Kasus: Bug Komentar Disqus Akibat Beda URL? Ini Solusinya!","description":"Kenapa URL development, preview, dan produksi bisa memecah thread Disqus — dan solusi untuk mengisolasi komentar hanya ke domain produksi.","date":"2026-02-16T10:00:00Z","updated":"2026-02-16T10:00:00Z","tags":["nextjs","vercel","disqus","debugging"],"content":"\nIni adalah momen yang akrab bagi setiap pemilik situs: Anda mendapatkan notifikasi email yang sudah lama ditunggu-tunggu, \"Seseorang baru saja mengomentari artikel Anda!\" Anda dengan penuh semangat mengklik tautan \"Lihat Komentar\", tetapi browser Anda membuka URL yang aneh dan panjang seperti `https://...cloudworkstations.dev/...` atau `https://ir-web.vercel.app/...`, bukan domain produksi Anda `https://snipgeek.com`.\n\nIni bukan hanya mengganggu; ini adalah gejala dari masalah teknis yang lebih dalam yang dapat memecah basis komentar Anda dan merusak pengalaman pengguna. Kami baru-baru ini menghadapi masalah ini secara langsung. Ini adalah studi kasus transparan tentang penyebabnya, berbagai upaya perbaikan kami, dan solusi akhir yang pada akhirnya menyelesaikan masalah.\n\n## Bab 1: Diagnosis Awal - Lingkungan Berbeda, URL Berbeda\n\nMasalah ini berakar pada cara Disqus mengidentifikasi sebuah halaman. Layanan komentar mengunci utas diskusi ke **URL pertama** tempat ia dirender.\n\n- Saat kita bekerja di lingkungan pengembangan, URL-nya adalah `http://localhost:3000` atau `https://...cloudworkstations.dev`.\n- Saat Vercel membuat pratinjau, URL-nya adalah `https://ir-web.vercel.app`.\n- Hanya di situs langsung, URL-nya adalah `https://snipgeek.com`.\n\nKarena Disqus melihat ketiga URL ini sebagai tiga halaman yang sama sekali berbeda, utas komentar menjadi terfragmentasi. Notifikasi email akan selalu menunjuk ke URL tempat komentar pertama kali \"dilihat\".\n\n## Bab 2: Perburuan Solusi - Dari `NODE_ENV` ke Nama Domain\n\nKami mencoba beberapa perbaikan, masing-masing dengan pelajarannya sendiri.\n\n#### Upaya #1: Memeriksa `process.env.NODE_ENV`\nIde awalnya adalah memuat Disqus hanya jika `NODE_ENV` adalah `\"production\"`. **Ini gagal**. Kami dengan cepat menyadari bahwa *pratinjau penerapan* di Vercel juga berjalan dalam mode `production`, sehingga masalah tetap ada.\n\n#### Upaya #2 (Solusi Akhir): Isolasi Berdasarkan Nama Domain\nSetelah beberapa kegagalan, kami sampai pada solusi yang paling kuat dan antipeluru: **mencegah Disqus dimuat sama sekali kecuali diakses dari domain produksi akhir.**\n\nIni menyelesaikan masalah pada akarnya. Jika komponen Disqus tidak pernah dirender di `localhost`, `cloudworkstations.dev`, atau `vercel.app`, tidak mungkin ia mendaftarkan URL yang salah.\n\nKami menerapkan ini langsung di dalam komponen `PostComments.tsx` dengan memeriksa `window.location.hostname`.\n\n```javascript\n'use client';\n\n// ...\n\nconst productionHostname = 'snipgeek.com'; // Domain produksi akhir\n\nexport function PostComments({ article }: PostCommentsProps) {\n  const [shouldLoad, setShouldLoad] = useState(false);\n  const commentsRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    // Observer untuk lazy-load\n    const observer = new IntersectionObserver(([entry]) => {\n      // Saat komponen masuk ke viewport...\n      if (entry.isIntersecting) {\n        // ...periksa apakah hostname adalah domain produksi.\n        if (window.location.hostname === productionHostname) {\n            setShouldLoad(true);\n        }\n        observer.disconnect(); // Berhenti mengamati setelah pemeriksaan.\n      }\n    });\n\n    if (commentsRef.current) observer.observe(commentsRef.current);\n    return () => observer.disconnect();\n  }, []);\n\n  if (!shouldLoad) {\n    // Tampilkan placeholder jika tidak di situs produksi\n    return (\n      <div ref={commentsRef} className=\"text-center ...\">\n        <p>Komentar hanya tersedia di situs produksi (snipgeek.com).</p>\n      </div>\n    );\n  }\n\n  // Jika di situs produksi, render Disqus dengan URL yang benar\n  const canonicalUrl = `https://${productionHostname}/blog/${article.slug}`;\n\n  return (\n    <DiscussionEmbed\n      shortname={disqusShortname}\n      config={{ url: canonicalUrl, ... }}\n    />\n  );\n}\n```\nPendekatan ini sangat spesifik: ia memeriksa **di mana** pengguna berada, bukan hanya *mode* aplikasi yang sedang berjalan.\n\n## Bab 3: Awal yang Baru dengan Shortname Bersih\n\nBahkan setelah perbaikan kode, kami memutuskan untuk mengambil satu langkah ekstra untuk memastikan tidak ada masalah di masa depan: **menggunakan *shortname* (ID situs) Disqus yang sama sekali baru**.\n\n**Alasannya:** *Shortname* lama sudah \"terkontaminasi\" dengan URL pengembangan dan pratinjau dari pengujian kami sebelumnya. Meskipun kami bisa menggunakan alat migrasi Disqus, memulai dengan *shortname* \"bersih\" yang belum pernah melihat URL selain domain produksi adalah jaminan terbaik untuk stabilitas jangka panjang. Kami memutuskan untuk menggunakan ID `snipgeek-com` untuk produksi akhir.\n\n## Kesimpulan: Pelajaran yang Didapat\n\nPerjalanan *debugging* ini mengajarkan kami pelajaran penting: ketika berhadapan dengan layanan pihak ketiga yang sensitif terhadap URL (seperti Disqus atau sistem komentar lainnya), solusi teraman adalah dengan mengisolasi mereka secara ketat ke **domain produksi akhir**, bukan hanya ke \"mode produksi\". Ini mencegah \"kebocoran\" konfigurasi dari lingkungan pratinjau dan memastikan integritas data Anda di situs langsung. Terkadang, memulai kembali dengan konfigurasi yang bersih adalah jalan tercepat menuju solusi yang stabil.\n"}