80%
Next.js App Router, server components, rendering strategies, caching0/23 questions known
1. What Next.js adds to React
DefinitionNext.js is a React framework: file-based routing, server rendering, data fetching, caching, API routes, image/font optimisation and bundling in one tool.
2. Server and Client Components
Runs on the server only; its code is not sent to the browser: Rendered on the server for HTML, then hydrated in the browser
Can be async, read the DB or secrets directly: Can use state, effects, event handlers, browser APIs
No useState, onClick, window: Can't be async; can't import server-only code
TipPush 'use client' down to the leaves (buttons, forms) so most of the page stays server-rendered with zero JS.
3. Rendering strategies
CSR: in the browser · dashboards behind login
SSR (dynamic): on every request · personalised or always-fresh pages
SSG (static): at build time · marketing pages, docs, blogs
ISR: at build, then regenerated after a time or on demand · product pages, large catalogs
Hydration = React attaching event handlers to server-rendered HTML.
Hydration mismatch: server and client render different output (dates, window, random values).
Partial prerendering: a static shell is served instantly, and dynamic holes stream in.
4. Data fetching, caching and mutations
Server Actions are public endpoints — always validate input and check auth inside them.
Cache invalidation: revalidatePath, revalidateTag (on-demand) or time-based revalidation.
Newer versions make caching explicit ('use cache', Cache Components); request APIs like cookies(), headers() and params are async.
Route Handlers (route.ts) for webhooks and public APIs.
5. Built-in features
next/link: client-side navigation + prefetching
next/image: resizing, lazy loading, modern formats, no layout shift
next/font: self-hosted fonts, no layout shift
Metadata API: export const metadata / generateMetadata for SEO tags
Common mistakeReading window or localStorage during render in a Client Component — it also renders on the server.
ReviseApp Router files = routes.
Most asked (8)
QWhat is Next.js and why use it instead of plain React?Next.js is a React framework.
QExplain SSR vs SSG vs ISR vs CSR.- CSR (client-side rendering): the server sends an almost empty page and JavaScript builds it in the browser.
QServer Components vs Client Components: what does 'use client' do?In the App Router, every component is a Server Component by default.
QHow does routing work in the App Router? What are layouts?Folders inside app/ define URL segments, and special files define what each segment renders: - page.tsx: the UI for that route (makes it…
QHow do dynamic routes and generateStaticParams work?A folder in square brackets is a dynamic segment: app/blog/[slug]/page.tsx matches /blog/anything.
QHow do you fetch data in the App Router?In Server Components you just await the data: fetch, an ORM query, or a file read.
QHow does caching and revalidation work in Next.js?Since Next.js 15, caching is opt-in: fetch is not cached by default and GET route handlers are dynamic.
QWhat are Server Actions?A Server Action is an async function marked with 'use server' that runs on the server but can be called from the client, usually as a…