Server Side Rendering Behaviour

[LukeTwomey]

Just curious how the React package would/should behave when NextJS server side rendering is happening to produce static files. In theory should the server make the github discussions api call for each page in advance, and render on the page with the giscus comments already loaded?

I'm seeing behaviour which I'm still trying to get my head around, and figure out where exactly I need to debug this.

Basically when you open a blog post from the blog section on my homepage (still in development, recommend only viewing in mobile size), the blog post loads, you briefly see the "loading comments" icon (I've temp moved the widget to the top of the page for ease of viewing), and the comments are loaded. Go back to the homepage, click on a different post and again the correct comments are loaded. This is fine.

However, when you click on a post from the homepage, scroll down through the content to the bottom of the page and click on a different post at that point (E.G. from the blog/what-do-i-include-in-my-portfolio page, scroll down and click through to the blog/how-to-become-a-web-developer post, you still see the comments from the previous page. There is no api call made to load the comments for that post. You have to refresh the page to make it happen.

Still see the "What do I include on my portfolio" comment from the page you were on previously. Refreshing the page loads the correct comments:

I'm sure this is something to do with NextJS and how I'm integrating the Giscus app, but would appreciate if you had any insight which might help!

[LukeTwomey]

Just tried using NextJS script to load in Giscus instead of the React package, still the same behaviour:

import Script from "next/script";

[laymonage]

When you navigate from one blog page to another, either React or Next.js is being smart by only re-rendering the ReactMarkdown and BlogPreview components in your blog page component because their props have changed. The other components, including the giscus component, are not re-rendered because their props stay the same, even when you navigate to a different blog page.

If you navigate to the homepage, that's a different page component and the giscus component does not exist there, so it gets unmounted by React. When you load another blog page, the giscus component is freshly mounted again, so there's no issue.

A possible solution is to pass the id that you have in getStaticProps as the key prop to the giscus component.

[LukeTwomey]

Thank you so much, this is now working perfectly!