Next.js Interview Questions India 2026: App Router, SSR, Server Components, and Performance

Next.js rendering strategies:

1. SSR (Server-Side Rendering): The page is rendered on the server on every request. The server executes the component, generates HTML, and sends it to the browser. The browser displays the HTML immediately (fast perceived load), then React hydrates it into an interactive app. Use when: data changes frequently and must be fresh on every request (user-specific dashboards, real-time prices, authenticated pages).

2. SSG (Static Site Generation): The page is rendered at build time (when you run npm run build). The output is static HTML files. The CDN serves the HTML directly with no server processing. Use when: content rarely changes (blog posts, documentation, marketing pages). Fastest performance; cheapest to serve.

3. ISR (Incremental Static Regeneration): SSG with a revalidation interval. A page is generated statically at build time; after the revalidation interval (e.g., 60 seconds), the next request to the page triggers a background regeneration. The current visitor still sees the stale page; the next visitor sees the fresh page. Use when: content changes occasionally (product catalogue, pricing pages).

4. CSR (Client-Side Rendering): HTML is minimal (shell only); JavaScript runs in the browser and renders the content. React's original model. In Next.js: use 'use client' + useEffect for client-only fetching. Use when: content is user-specific and not important for SEO (authenticated dashboards, user settings pages).

5. Per-segment rendering in App Router: The App Router allows mixed rendering in one application: a layout can be static, a page can be dynamic, and a nested component can stream. export const dynamic = 'force-dynamic' makes a segment always SSR; export const revalidate = 60 makes it ISR with a 60-second revalidation.

Next.js routing systems:

1. Pages Router (legacy, Next.js 12 and earlier): file-based routing under pages/. getStaticProps (SSG/ISR), getServerSideProps (SSR), getStaticPaths (for dynamic SSG routes). Still supported and widely used in existing codebases.

2. App Router (Next.js 13+, stable in Next.js 14): file-based routing under app/. Uses React Server Components by default. New conventions: page.tsx (the page content), layout.tsx (shared UI across pages), loading.tsx (loading UI / Suspense boundary), error.tsx (error boundary), route.ts (API route handler). Nested layouts: each route segment can have its own layout that wraps its children.

3. Key App Router concepts: - Server Components (default in App Router): run only on the server; output HTML; no JavaScript sent to the browser; can directly query databases, read files, access secrets; cannot use useState, useEffect, event handlers - Client Components ('use client' directive): run in the browser; can use React hooks and event handlers; receive Server Component output as children or props - Streaming: Next.js uses React's Suspense to stream HTML as server components resolve; users see content progressively rather than waiting for the entire page

4. Data fetching in App Router: Server Components can use async/await directly: ```tsx export default async function Page() { const data = await fetch('https://api.example.com/data', { next: { revalidate: 60 }, // ISR: revalidate every 60 seconds }) const json = await data.json() return <div>{json.title}</div> } ```

Next.js backend capabilities:

1. Route Handlers (App Router API routes): Files under app/api/*/route.ts export HTTP method handlers: ```ts export async function GET(request: Request) { const data = await fetchFromDB() return Response.json({ data }) }

export async function POST(request: Request) { const body = await request.json() // process body return Response.json({ ok: true }) } ```

2. Middleware: next/server Middleware runs before a request is completed. Located at middleware.ts at the project root. Use for: authentication (redirect to /login if not authenticated), rate limiting, A/B testing (redirect to a variant based on a cookie), geolocation-based redirects. Middleware runs on the Edge Runtime (fast, globally distributed).

3. Authentication patterns: Popular auth libraries for Next.js: next-auth (NextAuth.js) handles OAuth (Google, GitHub), email/password, and session management; Auth.js (the successor). Iron Session: encrypted cookie sessions. Clerk: third-party authentication-as-a-service with pre-built UI (very popular with Indian startups for reducing auth complexity).

4. Edge Runtime vs Node.js Runtime: Next.js supports two runtimes for API routes and middleware. Edge Runtime: V8-based; no Node.js APIs; global deployment on CDN edges; very low latency. Node.js Runtime: full Node.js; supports all npm packages; slightly higher cold-start latency; for database connections and heavy processing. Specify per route: export const runtime = 'edge'.

Next.js performance techniques:

1. Image optimisation: The next/image component automatically: serves WebP to browsers that support it, resizes images to the display size (no full-size images on mobile), lazy loads images below the fold, generates blur placeholders. Required: width and height props (or fill to fill the container).

2. Font optimisation: next/font automatically self-hosts Google Fonts (no external requests; no FOUC). Import the font from next/font/google, call it as a function, apply the className to <html> or a specific element.

3. Bundle size analysis: npx @next/bundle-analyzer: visualises what is in your JavaScript bundles; helps identify large dependencies to remove or code-split. Dynamic imports: use next/dynamic (or React.lazy) to code-split components that are not needed on initial load.

4. Core Web Vitals in Next.js: - LCP (Largest Contentful Paint): preload the hero image with priority prop on next/image; use SSR so the LCP element is in the initial HTML - CLS (Cumulative Layout Shift): always set width and height on images; avoid dynamically injecting content above the fold - INP (Interaction to Next Paint): move expensive computations to the server (Server Components); defer non-critical client JavaScript

5. Caching in Next.js App Router: Four caching layers: Request Memoization (dedup fetch calls with the same URL in a single render), Data Cache (fetch results cached across requests; invalidated by revalidate), Full Route Cache (cached HTML for static routes), Router Cache (client-side cache of visited pages for instant navigation).