Studi Kasus: Bug Komentar Disqus Akibat Beda URL? Ini Solusinya!

'use client';

// ...

const productionHostname = 'snipgeek.com'; // Domain produksi akhir

export function PostComments({ article }: PostCommentsProps) {
  const [shouldLoad, setShouldLoad] = useState(false);
  const commentsRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Observer untuk lazy-load
    const observer = new IntersectionObserver(([entry]) => {
      // Saat komponen masuk ke viewport...
      if (entry.isIntersecting) {
        // ...periksa apakah hostname adalah domain produksi.
        if (window.location.hostname === productionHostname) {
            setShouldLoad(true);
        }
        observer.disconnect(); // Berhenti mengamati setelah pemeriksaan.
      }
    });

    if (commentsRef.current) observer.observe(commentsRef.current);
    return () => observer.disconnect();
  }, []);

  if (!shouldLoad) {
    // Tampilkan placeholder jika tidak di situs produksi
    return (
      <div ref={commentsRef} className="text-center ...">
        <p>Komentar hanya tersedia di situs produksi (snipgeek.com).</p>
      </div>
    );
  }

  // Jika di situs produksi, render Disqus dengan URL yang benar
  const canonicalUrl = `https://${productionHostname}/blog/${article.slug}`;

  return (
    <DiscussionEmbed
      shortname={disqusShortname}
      config={{ url: canonicalUrl, ... }}
    />
  );
}