I have been facing a challenge while trying to integrate third-party commenting scripts like (disqus, remark42, hyvor) into my next.js application. The issue I encountered is that the script only loads on the initial page load. Subsequently, I need to refresh the page for the embedded third-party script to become visible. This poses a problem as it goes against the nature of react/next.js since next.js does not reload when navigating to another page using the Link component. Therefore, I am seeking a solution to selectively reload the Script component itself in order to ensure that my commenting widget appears consistently on every article page throughout the website.
code:
export const getStaticPaths: GetStaticPaths = async () => {
const data = await getArticles();
const paths = data.map((article) => ({
params: {
slug: article?.slug,
},
}));
return {
paths,
fallback: true,
};
};
export const getStaticProps = async ({
params,
}: GetStaticPropsContext<{ slug: string }>) => {
const article = await getArticleByProp("slug", params!.slug);
return {
props: {
article: article[0],
},
notFound: article.length === 0,
revalidate: 60,
};
};
const ArticlePage = ({
article,
}: InferGetStaticPropsType<typeof getStaticProps>) => {
const router = useRouter();
const formattedDate = useFormattedDate(
article?.createdAt ? new Date(article.createdAt) : new Date(),
"distance"
);
if (router.isFallback) {
return <div>Loading...</div>;
}
return (
<Container>
<SEOHeader
title={article?.title}
author={article?.author}
description={article?.excerpt}
ogImage={article?.featuredImage}
canonical={article?.slug}
/>
<Wrapper>
<ArticleWrapper>
<ArticleHeader>
<small className="category">{article?.category}</small>
<h1 className="title">{article?.title}</h1>
<p className="contributor">
<span>
By <strong> {article?.author}</strong> <br />
</span>
</p>
<div className="date">
<Clock size={18} />{" "}
<span>{article?.createdAt ? formattedDate : "N/A"}</span>
</div>
<button className="share">
<Share size={24} />
</button>
</ArticleHeader>
<ArticleBody>
{!!article?.featuredImage && (
<Featured>
<Image
src={article.featuredImage}
layout="responsive"
width={1920}
height={1080}
alt="Featured article image"
/>
</Featured>
)}
<ArticleExcerpt>{article?.excerpt}</ArticleExcerpt>
<ArticleMdx>{article?.body}</ArticleMdx>
</ArticleBody>
<div id="remark42">{""}</div>
{/* Additional scripting commented out */}
<Script id="custom-script-example">{`
const custom_config = {
host: 'https://example.com',
site_id: 'custom-site',
};
window.custom_config = custom_config;
!function(e,n){for(var o=0;o<e.length;o++){var s=n.createElement("script"),c=".js",a=n.head||n.body;"noModule"in s?(s.type="module",c=".mjs"):s.async=!0,s.defer=!0,s.src=custom_config.host+"/web/"+e[o]+c,a.appendChild(s)}}(custom_config.components||["embed"],document);
`}</Script>
</ArticleWrapper>
<Recommended>
<h2>Recommended</h2>
<ArticleCard card={article} variant="slim" />
<ArticleCard card={article} variant="slim" />
<ArticleCard card={article} variant="slim" />
<ArticleCard card={article} variant="slim" />
</Recommended>
</Wrapper>
</Container>
);
};
export default ArticlePage;