Reflecting Updated DB Data in Next.js Frontend - Understanding SSG and ISR

Introduction

This article is aimed at beginners in Next.js and web application development.

Background

About two months ago, I started learning web app development. I got stuck when my database updates weren't reflecting on the frontend, so I'm summarizing what I learned.

TL;DR

It turns out that Next.js, being highly functional, caches pages optimally by default. By using the revalidate option to render with ISR (Incremental Static Regeneration), the web page data was updated.

Overview

Structure

Backend: Node.js + MongoDB
Frontend: Next.js

Situation

Displaying data fetched from DB in app/title/[id]/page.tsx
Changed MongoDB data from 3 days to 30 days
Data wasn't updating on the frontend despite DB updates. Only 3 days of data were displayed.

What I Learned

Next.js has a caching feature and by default caches static pages.

About Rendering Methods

There are several types of rendering methods. The main differences are "when" and "where" HTML is generated:

CSR (Client Side Rendering): Page HTML is rendered in the browser based on HTML, JS, CSS fetched from the web server
SSR (Server Side Rendering): Web server renders page HTML based on HTML, JS, CSS for each browser request and returns it
SSG (Static Site Generator): Prerenders HTML at build time and generates page HTML to be passed to the browser
ISR (Incremental Static Regeneration): Similar to SSG, but regenerates static pages on the server side at regular intervals

Ref: SSR vs CSR vs ISR vs SSG

This Case

In this case, the problem was that pages generated by Static Site Generation (SSG) were cached and not updating. By default, Next.js statically generates pages at build time when not using getStaticProps.

Solution

Implement ISR to match infrequent data updates (e.g., once a day).
This can be achieved by adding the revalidate option to the page:

export const revalidate = 86400; // 24 hours, added
export default async function PageName({ params }: { params: PageNameProps }) {
  // ... existing code
}

Benefits of using ISR include maintaining fast response times (an advantage of SSG), being SEO-friendly, and allowing periodic updates.

Bonus: Other Solutions

On-demand revalidation: Regenerate pages triggered by specific events (e.g., DB updates)
Dynamic rendering: Use export const dynamic = 'force-dynamic' to generate pages on the server side every time

Conclusion

Due to Next.js's high functionality, its default SSG behavior caused DB updates not to reflect on the frontend. The cause was optimal page caching by default. Using the revalidate option for ISR rendering updated the web page data. I learned the importance of understanding rendering differences to avoid being overwhelmed by frameworks.

Blog