Disqus integration in next js app, Next Link and Next Script causing issues

Question

I am trying to integrate disqus in my next website but I have to use Link tag for navigation. I cannot use anchor tag in this use case. The disqus is implemented by this code, it's very simple I made disqus component using disqus universal js script and rendered it in another client component.

Everything works well in initial load but the main problem is when i navigate to different page using link that the disqus section disappears if I re-enter and the components doesn't load at all. There is no error in the console.

When I hard refresh from browser the component appears again. I suspect main culprit is Next Link tag and Next Script tag. I have been stumped by this problem for a long time.

import React from "react";
import Script from "next/script";

const Javascriptmenu = () => {
    return ( <> 
       <div id="disqus_thread"></div>
       <Script id="chapter" >
       { 
           `
              var disqus_config = function () {
                 this.page.url = document.location.href;  // Replace PAGE_URL with your page's canonical URL variable
                 this.page.identifier = document.location.href.split(".online")[1]; // Replace    PAGE_IDENTIFIER with your page's unique identifier variable
              };
              (function() { // DON'T EDIT BELOW THIS LINE
                  var d = document, s = d.createElement('script');
                  s.src = 'https://yoururlhere.disqus.com/embed.js';
                  s.setAttribute('data-timestamp', +new Date());
                  (d.head || d.body).appendChild(s);
              })();
    `}
</Script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
 </>
);
}

Answer 1

I have fixed this issue by using this code . This is caused by Next Link tag and Next script not working well together. The script was not being loaded twice as it is already saved in cache. As long as you do not hard refresh the script will not reload. The below code solves this problem and will load script on each link tag click.

    const Javascriptmenu: React.FC<JavascriptProps> = ( {
     id
    }) => {

    const javascriptMenuRef = useRef<HTMLDivElement>(null)

    const script = 
    `
    
    <script id={${id}>
    { 
    
     var disqus_config = function () {
     this.page.url = document.location.href;  // Replace PAGE_URL with 
     your page's canonical URL variable
     this.page.identifier = ${id}; // Replace PAGE_IDENTIFIER with your 
     page's unique identifier variable
 
     };
     (function() { // DON'T EDIT BELOW THIS LINE
     var d = document, s = d.createElement('script');
     s.src = 'https://Yoururlhere.disqus.com/embed.js';
     s.setAttribute('data-timestamp', +new Date());
     (d.head || d.body).appendChild(s);
     })();
     
     
     }
 </script>
 `

 useEffect(() => {
    /* Clear out the loaded script's on component's un-mount */
    return () => {
        document.getElementById(`${id}`)?.remove()
        document.getElementById('s_load_loader')?.remove()
        document.getElementById(`${id}-s15dasboard`)?.remove()
        document.getElementById(`${id}-universal`)?.remove()
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

useEffect(() => {
    if (id) {
        // creates a document range (grouping of nodes in the document). In this case, we instantiate it as empty, on purpose
        const range = document.createRange()
        // creates a mini-document (lightweight version), in our range with our script in it
        const documentFragment = range.createContextualFragment(script)
        // appends it on the same level of annex div - so that it renders in the correct location
        javascriptMenuRef.current?.appendChild(documentFragment)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [id])
 
    return ( 
       <> 
       <div id="disqus_thread"></div>
       <div ref={javascriptMenuRef}>
       <div id={ `${id}-s15dasboard` }/>
       </div>

       <noscript>Please enable JavaScript to view the <a 
       href="https://disqus.com/?ref_noscript">comments powered by 
       Disqus.</a>
       </noscript>
       </>

     );
  }
 
export default Javascriptmenu;

Hope this helps if you are stuck on same problem