About This Project
When you run an EC site, two requests always come as a pair: "make pages load faster" and "keep product information up to date." The tricky part is that these two pull against each other. If you freeze pages to make them fast, updates fall behind; if you always serve the latest data, pages get slow.
This project solved that trade-off using ISR, a feature of Next.js (a framework that serves as the foundation for building websites). ISR pre-builds pages and serves them at high speed, then automatically rebuilds them at intervals you choose. Combined with webhooks (a mechanism that sends automatic notifications when something happens), product updates made in the admin panel reach the site shortly after, without anyone lifting a finger.
The implementation itself was driven from a non-engineer's standpoint, describing the desired setup to an AI agent (AI-powered development support). Once we decided "which pages should refresh every how many seconds," the mechanism came together without much friction.
Learn More
ISR is explained in three articles, organized so you can read from basics to benefits to inner workings.
What is ISR?
Learn the basic concept of ISR and how it differs from traditional static generation (SSG) and server-side rendering (SSR).
Fast Loading with ISR
Learn about the benefits of ISR, including improved load times, Core Web Vitals impact, and reduced API calls.
How ISR Works
Learn about revalidate settings, On-Demand ISR, and Webhook integration.
Architecture
In the traditional approach, the server assembles the page from scratch on every visit, so users wait every single time.
Before going live, pages are pre-built and placed on distribution points (CDN) around the world.
Users get the pre-built page immediately, and once the validity period passes, a fresh version is rebuilt behind the scenes.
A product update notification discards the stale pre-built page, and the next visit swaps in the latest version.
Technologies Used
- Next.js (App Router)
- Vercel (Hosting & Edge Network)
- Shopify Storefront API
- Shopify Webhook