Questions
3 of 20
1What is static site generation (SSG) in Next.js?
2What are the benefits of Static Site Generation in Next.js?
3What is Incremental Static Regeneration (ISR)?
4What is are different revalidation strategies in Incremental Static Regeneration (ISR)?
5How do we generate static pages in a NextJS project with the app router?
6Discuss getStaticProps in brief
7Discuss briefly getStaticPaths
8What are the fallback options in getStaticPaths?
9What is generateStaticParams in the App Router?
10What types of pages are best suited for SSG?
11How does SSG differ from SSR and CSR?
12How does Next.js handle cache invalidation in ISR, and what are the pitfalls?
13What is the difference between revalidatePath and revalidateTag? When do you use each?
14How does SSG interact with middleware in Next.js?
15What are the trade-offs between full static export (output: 'export') vs standard SSG with ISR?
16How do you avoid build-time data staleness in SSG?
17What is Partial Prerendering (PPR) and how does it relate to SSG?
18How would you architect SSG for a site with 100,000+ pages?
19How does SSG work in a monorepo or multi-zone Next.js architecture?
20How would you debug a page that should be static but is being rendered dynamically?
nextjsnextjs
Basics
Project Structure
Runtime
Compiler
SSG
SSR
CSR
Routing
Route Handlers
Route Groups
Dynamic Routes
Parallel Routes
Intercepting Routes
Middleware
Server Actions
APIS
Data Fetching
Caching
Clients
Optimisation
i18n
Security
Architecture
Deployment
Accessibility
03 / 20

What is Incremental Static Regeneration (ISR)?

ISR enables you to use static generation on a per-page basis while revalidating pages in the background as traffic comes in. Incremental Static Regeneration (ISR) enables you to:

  1. 1

    Update static content without rebuilding the entire site

  2. 2

    Reduce server load by serving prerendered, static pages for most requests

  3. 3

    Ensure proper cache-control headers are automatically added to pages

  4. 4

    Handle large amounts of content pages without long next build times

javascript
Here's how this example works:
  1. 1

    During next build, all known blog posts are generated (there are 25 in this example)

  2. 2

    All requests made to these pages (e.g. /blog/1) are cached and instantaneous

  3. 3

    After 60 seconds has passed, the next request will still show the cached (stale) page

  4. 4

    The cache is invalidated and a new version of the page begins generating in the background

  5. 5

    Once generated successfully, Next.js will display and cache the updated page

  6. 6

    If /blog/26 is requested, Next.js will generate and cache this page on-demand