DEV Community

Cover image for Reflecting Updated DB Data in Next.js Frontend - Understanding SSG and ISR
Sho Ayuba
Sho Ayuba

Posted on

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
}
Enter fullscreen mode Exit fullscreen mode

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.

References

Top comments (0)