Next.js Interview Questions — Medium

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.

---