Next.js Interview Questions — Hard

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.

---