PortfolioAbout This Project
ISR (Incremental Static Regeneration) is a Next.js feature that generates static pages while automatically updating them at set intervals.
For EC sites, it's essential to display up-to-date product information while maintaining fast load times. With ISR, you can achieve both fast delivery from cache and fresh data.
Learn More
Three articles explain ISR in detail.
1
What is ISR?
Learn the basic concept of ISR and how it differs from traditional static generation (SSG) and server-side rendering (SSR).
2
Fast Loading with ISR
Learn about the benefits of ISR, including improved load times, Core Web Vitals impact, and reduced API calls.
3
How ISR Works
Learn about revalidate settings, On-Demand ISR, and Webhook integration.
Architecture
Traditional SSR (Server-Side Rendering)
User Request
Every page load
Server Processing
API call + HTML generation
Display
Wait time on every request
ISR - At Build Time
Fetch Data
Call Shopify API
Generate HTML
Create static pages
Deploy to CDN
Ready for fast delivery
ISR - On User Access
User Request
Visit product page
CDN
Serve cached page instantly
Background Update
After revalidate time, regenerate
Fast Display
Users never wait
On-Demand ISR - Product Update
Webhook
Product updated in Shopify
API Route
Receive webhook notification
Invalidate Cache
Clear old cached page
Fresh Data
Next visitor sees updated content
Technologies Used
- Next.js (App Router)
- Vercel (Hosting & Edge Network)
- Shopify Storefront API
- Shopify Webhook