Next.js Interview Questions

Answer: ISR allows Next.js to update static pages after the initial build without re-deploying the entire site.

• Initial Request: The server serves the pre-rendered HTML/JSON generated at build time (instantaneous CDN delivery).
• Revalidation Window: If a request comes after the defined revalidate period (e.g., 60 seconds):
  1. Next.js serves the stale static page to the current visitor.
  2. Next.js triggers a revalidation process in the background on the server.
  3. The server regenerates the page and updates the CDN cache with new static files.
  4. Subsequent visitors receive the newly updated static page.

Answer: On-Demand Revalidation updates static pages instantly when data changes, rather than waiting for a time interval to expire.

• Action: Uses revalidatePath() or revalidateTag() inside server context to purge the cache.
• Superiority:
  • Efficiency: Eliminates unnecessary API queries during low-traffic periods.
  • Freshness: Solves the stale-data issue by updating the CDN cache immediately when a database write occurs.

Answer: Server Actions are asynchronous functions that run on the server but can be invoked directly from Client or Server Components.

• Mechanism: Next.js generates an implicit POST request endpoint under the hood when a Server Action is declared.
• Benefits:
  • No API Controllers: Eliminates writing custom Route Handlers or fetch() boilerplate to save form data.
  • Progressive Enhancement: Forms can submit and work even before the client-side JavaScript has fully loaded.
  • Security: Runs inside the server environment with access to backend services.

Answer: Middleware runs code before a request is completed, enabling request rewrite, headers manipulation, and redirection.

• Execution Timing: Executes after routing but before matches in the filesystem (pages or public folder) are processed.
• Runtime: Runs on the Edge Runtime (lightweight V8 engine), not standard Node.js.
• Limitations:
  • Cannot use standard Node.js APIs (like fs, child_process).
  • Limited external package compatibility (only packages using standard web APIs).
  • Max execution memory and time limits apply (Vercel limits).

Answer: Route Groups are directories wrapped in parentheses, such as (marketing) or (shop).

• Path Exclusion: The folder name is omitted from the URL path (e.g., app/(shop)/product/page.js is accessed via /product).
• Layout Isolation: Allows creating distinct layouts for specific groups of pages without creating subdirectories in the URL.
• Multiple Root Layouts: Can be used to create multiple root layouts with different <html> tags by placing pages inside separate route group folders.

Answer:

• Serialization Protocol: Server Components compile to a flight JSON stream rather than HTML. This stream contains element types, props, and references to client component JS bundles (known as client references) but completely excludes the actual JS implementation of the server components.
• Transmission: The stream is pushed over HTTP to the client in real time as chunks resolve on the server.
• Client-Side Merging: The React client-side reconciler reads the stream. When it encounters a Client Component reference, it fetches the pre-chunked JS from the CDN, boots it, and instantiates the component. It then merges this virtual DOM representation into the existing DOM tree without destroying state inside active React client islands.

Answer:

• AST Analysis: SWC parses the file Abstract Syntax Tree (AST) to identify exports, imports, and directives.
• Dead Code Elimination: When 'use client' is declared, SWC splits the module, packaging the client dependencies into browser bundles and exporting an empty reference proxy to the server bundle.
• Inlining and Minification: SWC compiles TS/JSX down to native JS, inline-evaluates static conditions, strips unused code paths, and hashes chunks, executing these tasks up to 10x faster than Webpack's Babel loader.

Answer:

• Module-Scope Singletons: Declaring shared connections (e.g., database clients like Knex or Prisma) in the global module scope of files can create new database connections on every dynamic server-side rebuild or hot-reload.
• Dynamic Event Listeners: Appending events to global objects (like process or custom EventEmitters) inside server renders causes listeners to pile up, exhausting process memory.
• Resolution: Implement the singleton pattern utilizing global context caching (globalThis or Node's global object) to reuse active instances across compiler hot-reloads in development.

Answer:

• React Server hydration: Traditional React SSR hydrates the entire page at once. If any part of the component tree is missing its client-side JS bundle, hydration is delayed, blocking interactions.
• Incremental Hydration: Next.js divides Client Components into discrete boundaries (islands) wrapped in Suspense.
• Prioritization: Allows the browser to hydrate visible or highly interactive parts of the page first, using event delegation to record user actions on non-hydrated elements and replay them once their bundle arrives.

Answer: PPR optimizes rendering by splitting pages into a static shell and dynamic segments:

• Build Time: Next.js compiles layout, structural wrappers, and static components to pure HTML.
• Request Time: The CDN serves the static HTML shell instantly.
• Streaming Holes: Unresolved promises inside <Suspense> boundaries are left as empty placeholders. The server processes these dynamic fetches and streams the resolved HTML chunks to fill the holes, merging them without client-side navigation.