NextJS Performance Optimization Syllabus

What is the trade-off expressed by lossy versus lossless image compression?

Lossy compression (JPEG/WebP/AVIF) discards some data for much smaller files, while lossless (PNG) preserves all data at the cost of larger file size.

How does the next/image placeholder='blur' feature improve perceived performance?

It shows a small blurred version of the image while the full image loads, improving perceived loading and reducing visual pop-in.

What is automatic code splitting in Next.js?

Next.js automatically splits your JavaScript into separate bundles per page/route so that a user only downloads the code needed for the page they visit, rather than the entire app.

On what boundary does Next.js perform automatic code splitting by default?

On the page/route boundary — each page becomes its own JavaScript chunk, loaded only when that route is visited.

How does automatic code splitting improve initial page load time?

By reducing the amount of JavaScript downloaded and parsed on first load; only the current route's code ships, lowering bundle size and Time to Interactive.

What is a dynamic import in Next.js?

A way to import a module or component only when it is needed at runtime, using next/dynamic or the JavaScript import() function, creating a separate chunk loaded on demand.

Which Next.js function is used for dynamically importing components with SSR control?

dynamic from 'next/dynamic' — e.g., const Comp = dynamic(() => import('../components/Comp')).

How do you disable server-side rendering for a dynamically imported component?

Pass { ssr: false } as the options object: dynamic(() => import('./Comp'), { ssr: false }). The component then only renders on the client.

What does the loading option of next/dynamic do?

It specifies a component (e.g., a spinner or skeleton) to display while the dynamically imported chunk is being fetched and loaded.

Give a common use case for ssr: false with a dynamic import.

Loading components that depend on browser-only APIs (like window, document, or a chart/map library that accesses the DOM) which would break during server rendering.

What is lazy loading of components?

Deferring the loading of a component's code (and rendering) until it is actually needed—such as when it scrolls into view or on user interaction—reducing the initial bundle size.

Which React API underlies lazy loading of components, and what pairs with it?

React.lazy() for defining the lazy component, paired with <Suspense> to provide a fallback UI while it loads.

How does lazy loading differ from eager loading?

Eager loading downloads and renders a component immediately on page load; lazy loading defers that work until the component is needed, shrinking the initial payload.

Name a scenario where lazy loading a component is especially beneficial.

Heavy or below-the-fold components such as modals, tabs not initially shown, comment sections, charts, or video players that aren't needed on first paint.

What is the relationship between dynamic imports and code splitting?

A dynamic import creates a new code-split chunk; the bundler splits the dynamically imported module into a separate file loaded on demand, so dynamic imports are the mechanism for on-demand code splitting.

What is static file caching in the context of Next.js?

Storing static assets (images, JS, CSS, fonts) in browser or CDN caches so repeat requests are served without re-downloading from the server, speeding up subsequent loads.

What Cache-Control header does Next.js apply to hashed build assets in the /_next/static folder?

public, max-age=31536000, immutable — cached for one year and never revalidated, because the filename hash changes when content changes.

Why can files in /_next/static be cached immutably for a year?

Because their filenames include a content hash; any change produces a new filename, so the cached old file never becomes stale (cache-busting via fingerprinting).

How many seconds is one year of max-age, as used for immutable static assets?

$31536000$ seconds (that is $365 \times 24 \times 60 \times 60$).

What does the immutable directive in a Cache-Control header tell the browser?

That the resource will never change during its freshness lifetime, so the browser should not send revalidation requests even on reload.

Where should you place static assets like robots.txt or favicon.ico that must be served at the root path?

In the public/ directory, whose contents are served from the base URL (e.g., public/favicon.ico → /favicon.ico).

What is a CDN and how does it improve Next.js performance?

A Content Delivery Network is a network of geographically distributed edge servers that cache and serve static content from a location near the user, reducing latency and offloading the origin server.

How does using a CDN reduce latency for users?

By serving cached content from an edge server physically closer to the user, shortening the network round-trip distance and time compared to reaching a distant origin server.

When deploying Next.js, which assets are typically served via a CDN automatically?

The static assets under /_next/static (JS, CSS chunks) and optimized images, which are distributed to edge locations by platforms like Vercel.

What is the difference between a CDN cache and a browser cache?

A browser cache stores assets on a single user's device; a CDN cache stores assets on shared edge servers benefiting all nearby users, serving them without hitting the origin.

What is server-side caching in Next.js?

Caching the results of server-rendered pages or data fetches on the server/edge so repeated requests can be served from cache instead of re-rendering or re-fetching, reducing server load and response time.

What is Incremental Static Regeneration (ISR) and how does it relate to server-side caching?

ISR lets statically generated pages be regenerated in the background after a set interval; the cached page is served until it is revalidated, combining static caching with periodic freshness.

In the Next.js Pages Router, which getStaticProps return value enables ISR revalidation?

The revalidate property (in seconds), e.g., return { props, revalidate: 60 }, which tells Next.js to regenerate the page at most once every 60 seconds.

In the Next.js App Router fetch API, which option sets the revalidation interval for cached data?

The next.revalidate option, e.g., fetch(url, { next: { revalidate: 60 } }), caches the response and revalidates it after 60 seconds.

How do you opt a fetch out of server-side caching in the Next.js App Router?

Set cache: 'no-store' (fetch(url, { cache: 'no-store' })), which makes the request dynamic and fetched fresh on every request.

Compare stale-while-revalidate behavior (as in ISR) to serving a fully dynamic page on every request.

Stale-while-revalidate serves a fast cached (possibly slightly stale) page instantly while regenerating in the background, whereas a fully dynamic page re-renders on every request—slower but always fresh.