This content originally appeared on DEV Community and was authored by sayuba
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
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.
References
- Next.js - Incremental Static Regeneration (ISR)
- Basic configuration, rendering and caching settings, and points to note when using ISR with Next.js (App Router)
This content originally appeared on DEV Community and was authored by sayuba
sayuba | Sciencx (2024-10-18T23:57:43+00:00) Reflecting Updated DB Data in Next.js Frontend – Understanding SSG and ISR. Retrieved from https://www.scien.cx/2024/10/18/reflecting-updated-db-data-in-next-js-frontend-understanding-ssg-and-isr/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.