More in Frontend Dev — page 22
Describe React's diffing algorithm and its O(n) heuristics
WHAT IT TESTS: Why React skips O(n³) diffing for heuristics and the cost. ANSWER OUTLINE: Different types unmount and rebuild; same types patch attributes and recurse; keys hint stable identity for children.
What are keys in React lists and why are they important?
Whether you understand React's reconciliation identity tracking. Keys are unique identifiers that let React match items across renders, preserving DOM state and avoiding unnecessary recreation.
How would you design auth for ISR pages without losing cache benefits?
Tests cache segmentation and dynamic boundaries in Next.js. Propose a static ISR shell for anonymous users, then fetch personalized data client-side or via dynamic server paths when cookies are present.
How can you use Edge Middleware for auth and trade-offs versus getServerSideProps?
TESTS: Auth placement judgment. OUTLINE: Middleware checks cookies/JWT for fast Edge rewrites/redirects; getServerSideProps uses full Node.js for heavy sessions with colder starts. RED FLAG: Claiming Edge Middleware can query a database directly.
Describe a robust automatic token refresh strategy in a React SPA
This tests token rotation without UX interruption in SPAs. Use HttpOnly cookies for refresh tokens, in-memory access tokens, an interceptor with a promise lock, and proactive background refresh.
How do you handle user-specific content on a getStaticProps page?
Tests the static generation boundary. A strong answer serves a static shell, then hydrates user state client-side via useEffect or SWR. Red flag: claiming getStaticProps can read cookies at build time.
Would you use getServerSideProps or getStaticProps for private user data?
Tests SSR vs SSG privacy. Use getServerSideProps: it runs per-request with auth cookies. getStaticProps bakes HTML/JSON at build time, leaking private data across users. Red flag: suggesting ISR or revalidation for authenticated data.
How would you implement a basic protected route in React?
WHAT IT TESTS: Whether you can gate React Router 7 routes declaratively. ANSWER OUTLINE: Hold auth in useState, pass user to protected components, and return Navigate to login when absent.
How do you manage Next.js env variables on Vercel and use NEXT_PUBLIC_?
WHAT IT TESTS: Server-client boundary awareness and secret hygiene. ANSWER OUTLINE: Set DB strings in Vercel dashboard without NEXT_PUBLIC_; consume in server code only. NEXT_PUBLIC_ inlines values into the browser JS bundle, leaking them to all users.
Implement a custom next/image loader for a self-hosted service
Tests next/image loader contract and URL construction. A strong answer defines a function taking src, width, and quality; returns a URL string for your service; and wires it via the loader prop or loaderFile config.
Implement A/B testing with Middleware rewrites and cookies
WHAT IT TESTS: Using Next.js Middleware to split traffic and the cache or analytics impact. ANSWER OUTLINE: Sticky cookie, internal rewrite, vary cache on cookie, server-side analytics. RED FLAG: Client redirects or ignoring cache collisions.
How do you opt out of static rendering for real-time data?
Tests Next.js App Router caching and dynamic rendering escape hatches. Cover force-dynamic SSR, ISR with revalidate, noStore, and client fetching; weigh server load vs staleness. Red flag: only CDN purges without segment config or data cache fixes.
Explain how next/image's sizes prop works for responsive performance
This tests your knowledge of the browser responsive image algorithm. The sizes prop declares the rendered width at each breakpoint so the browser can select the smallest adequate srcset candidate.
How to structure translations and load locale content in App Router
Tests App Router i18n architecture with next-intl. Answer: locale-prefixed routes, JSON message files with ICU syntax, and next-intl APIs consumed in Server Components. Red flag: using client-side locale state instead of integrated routing.
Full Route Cache vs Data Cache and per-fetch cache control
Tests App Router's dual caching layers. Full Route Cache stores rendered HTML and RSC payload at build time; Data Cache stores raw fetch results across routes. Control a fetch with cache and next.revalidate options.
Where Next.js Middleware executes and Edge Runtime limits
Tests your grasp of Edge Runtime constraints. Middleware runs at the Edge before route matching, with no Node.js APIs, require, Buffer, or dynamic eval, only Web APIs. Red flag: treating it as Node.js and suggesting fs or npm packages.
How do you enable basic i18n routing in Next.js?
This tests your knowledge of the built-in Pages Router i18n configuration in next.config.js. A good answer exports an i18n object with locales array, defaultLocale, and optionally localeDetection.
What is Next.js Middleware and a real-world auth use case?
This tests request interception before a route renders. A good answer defines Middleware as pre-request code using NextRequest and NextResponse, often on the Edge Runtime, with auth redirects as an example.
What are the benefits of next/image over a standard img tag?
Tests knowledge of Next.js image infrastructure. Strong answers mention automatic optimization, lazy loading, blur placeholders for layout shift, and responsive srcset. Red flag: calling it a zero-impact wrapper or a styling component.
How to securely set and read httpOnly cookies in Route Handlers
This tests cookie security across the App Router. A strong answer covers setting httpOnly, Secure, SameSite via NextResponse in a Route Handler, reading with cookies() later, and why document.cookie cannot access it. Red flag: client-side JavaScript access.