Skip to content

Dynamic comments for a static website

Posted on:February 13, 2021 at 12:00 AM

It’s safe to say that for the first time in a long time, I actually finished something. Well, not 100% finished, but got this something into a usable state.

In my previous post, I outlined some of the plans for this blog. And while Social Images — one of the features I planned early on — was pretty easy to implement, this one was much more challenging.

Static Sites

This particular site is powered by Next.js 10, a fantastic framework powering millions of static websites. It’s really easy to build a static blog with Next.js, hook it up to, and deploy it to Vercel. Next.js is smart enough to offer both static pages, dynamic pages, and a thing they call Incremental Static Generation. With out-of-the box serverless functions integration with Vercel, truly the sky is the limit.

The biggest challenge, though, comes when you realize that your site is built once, then deployed and remains what it was at build time until you re-build and re-deploy It.

Clearly, some pages and features absolutely require dynamically generated pages. Take user profiles, for example, or dashboards, you get the idea. Next.js allows you to mix and match static and dynamic content, but dynamic pages do not get some of major benefits of pre-generated pages.

And here we come to the comment sections of blogs. There’s a fair number of folks who detest blog comments, and I understand the sentiment. I’m not sure I’m a fan either, but here I am, learning stuff while building a comment section for my blog 🤷‍♂️


Comments are not dynamic per se. They are static when already posted. Yet, when someone posts a comment things get more complicated. A newly posted comment could trigger an entire site rebuild, or, in case of Next.js, trigger an incremental rebuild of a specific page (I’ll get to this in a moment). So this solves the issue, right? Someone posts a comment, Next.js rebuilds the page, everybody’s happy? Not exactly. Users would have to refresh the page to see their new comment: the page had been rebuilt in the background, yes, but to get this newly built page, you’d have to hit refresh. Not ideal.

Dynamic Comments on Static Sites

Now, it sounds pretty simple and straightforward, and I promise you it is! However, there’s so much more that goes into posting comments.

Where do you store these comments?

How do you authenticate visitors?

Believe it or not, but I spent probably 80% of the time on these two items. I ended up storing comments in MongoDB and authenticate users with Okta Firebase Auth0. Let me gather my thoughts and walk you through the specifics in the next post.

Feel free to leave a comment below :) Please keep in mind that it’s still very much work in progress: some obvious things don’t work as expected, others are half-baked, and the entire thing is fairly easy to break. Be gentle :)