{"slug":"disqus-production-domain-isolation-case-study","locale":"en","isFallback":false,"translationAvailable":["en","id"],"translationUrls":{"en":"/api/notes/disqus-production-domain-isolation-case-study?locale=en","id":"/api/notes/disqus-production-domain-isolation-case-study?locale=id"},"title":"Fixing Fragmented Disqus Comments via Domain Isolation","description":"A developer's case study on preventing comment fragmentation by strictly isolating third-party services like Disqus to the production domain.","date":"2026-03-09","updated":null,"tags":["nextjs","vercel","disqus","debugging","devops"],"content":"\nIt's a familiar moment for every site owner: you get that long-awaited email notification, \"Someone just commented on your article!\" You eagerly click the \"View Comment\" link, but your browser opens a strange, long URL like `https://...cloudworkstations.dev/...` or `https://snipgeek.com.vercel.app/...`, not your production domain `https://snipgeek.com`.\n\nThis isn't just annoying; it's a symptom of a deeper technical problem that can fragment your comment base and ruin the user experience. This is a transparent case study of its cause, our various repair attempts, and the final solution.\n\n## The Root Problem: URL Fragmentation\n\nThe problem is rooted in how Disqus identifies a page. The comment service locks a discussion thread to the **first URL** where it is rendered.\n\n- **Development**: `http://localhost:3000` or `https://...cloudworkstations.dev`\n- **Preview**: `https://snipgeek.com.vercel.app`\n- **Production**: `https://snipgeek.com`\n\nBecause Disqus sees these as three completely different pages, the comment threads become fragmented. The email notification will always point to the URL where the comment was first \"seen\".\n\n---\n\n## Trial and Error: The Hunt for a Solution\n\nWe tried several fixes, each with its own lesson.\n\n<Steps>\n  <Step>\n    **Initial Attempt: Checking NODE_ENV**\n    The first idea was to load Disqus only if `NODE_ENV` was `\"production\"`.\n    <Callout variant=\"danger\" title=\"Why it Failed\">\n      We quickly realized that *preview deployments* on Vercel also run in `production` mode, so the fragmentation persisted in staging environments.\n    </Callout>\n  </Step>\n\n  <Step>\n    **The Final Solution: Isolation by Domain Name**\n    We decided to prevent Disqus from loading at all unless it is accessed from the final production domain. This solves the problem at its root.\n  </Step>\n</Steps>\n\n### Implementation Details\n\nWe implemented this directly within the component by checking `window.location.hostname`.\n\n```javascript\n'use client';\n\nconst productionHostname = 'snipgeek.com'; \n\nexport function PostComments({ article }) {\n  const [shouldLoad, setShouldLoad] = useState(false);\n\n  useEffect(() => {\n    // Check if the current hostname matches the production domain\n    if (window.location.hostname === productionHostname) {\n        setShouldLoad(true);\n    }\n  }, []);\n\n  if (!shouldLoad) {\n    return (\n      <div className=\"text-center py-10 border border-dashed rounded-xl\">\n        <p>Comments are only available on the production site (snipgeek.com).</p>\n      </div>\n    );\n  }\n\n  const canonicalUrl = `https://${productionHostname}/blog/${article.slug}`;\n\n  return (\n    <DiscussionEmbed\n      shortname=\"snipgeek-com\"\n      config={{ url: canonicalUrl }}\n    />\n  );\n}\n```\n\n---\n\n## A Fresh Start with a Clean Shortname\n\nEven after the code fix, we took one extra step to ensure stability: **using a completely new Disqus shortname**.\n\n<Callout variant=\"tip\" title=\"Best Practice\">\n  The old shortname was already \"contaminated\" with development and preview URLs. Starting with a \"clean\" ID like `snipgeek-com` that only ever sees production URLs is the best guarantee for long-term data integrity.\n</Callout>\n\n## Conclusion\n\nThis debugging journey taught us that when dealing with third-party services sensitive to URLs, the safest solution is to strictly isolate them to the **final production domain**. This prevents configuration \"leaks\" from preview environments and ensures your data remains centralized.\n"}