Drills

SSR vs CSR vs static rendering in Next.js

Explains server rendering, client rendering, static rendering, freshness, SEO, personalization, and performance trade-offs.

State updates, batching, and functional setters

Explains asynchronous-looking state updates, batching, functional setters, and avoiding stale values.

Coding problemMedium~25 min

Synchronize filters and pagination with the URL

Makes list filters shareable and back-button friendly while resetting pagination deliberately.

Coding problemEasy~15 min

Test a component through user behavior

Tests validation, focus, pending state, and the save contract through accessible user interactions rather than component internals.

Coding problemHard~35 min

Test a critical user flow with Playwright

Tests one browser-to-database practice workflow with isolated fixtures, resilient locators, durable assertions, and reliable cleanup.

Next.jsPlaywrightReactTypeScript

Next.jsPlaywrightReactTypeScript

Test React components through user behavior

Explains component tests that assert user-visible behavior instead of implementation details.

Concept questionHard~9 min

Trace full-stack user actions in production

Explains tracing one user action across browser, frontend server, API, dependencies, logs, metrics, and safe diagnostics.

.NETASP.NET CoreNext.jsReactTypeScript

Concept questionHard~9 min

Use a Next.js backend-for-frontend with an ASP.NET API

Explains when a Next.js route layer helps with cookies, tokens, aggregation, and UI-specific API adaptation.

.NETASP.NET CoreNext.jsReactTypeScript

Comparison questionMedium~7 min

Use a reducer for explicit React state transitions

Explains when a reducer clarifies related state transitions and when independent state remains simpler.

Use Suspense and streaming boundaries in Next.js

Explains how Suspense boundaries stream useful page regions while coordinating loading, errors, and data ownership.

What are the trade-offs of using nonce-based CSP with Next.js?

Balances strict script policy with per-request nonces, dynamic rendering, third-party scripts, caching, and operational rollout.

Architecture scenarioHard~10 min

What belongs in Next.js Proxy, and what does not?

Keeps Next.js 16 Proxy focused on request routing and optimistic checks rather than data access or final authorization.

Concept questionHard~10 min

What can cross the Server-to-Client Component boundary?

Defines the serializable prop boundary, component composition pattern, and protections against leaking server-only data.

What changed about route and request APIs in modern Next.js?

Covers Promise-based params and search parameters, async request APIs, generated route types, and runtime validation.

What happens during React's render and commit phases?

Separates React's pure calculation work from DOM mutation, layout effects, passive effects, and browser paint.

Concept questionHard~12 min

What problem do Cache Components and the `use cache` directive solve?

Explains Next.js 16 explicit caching, static shells, dynamic islands, cache keys, and adoption boundaries.

When and how would you virtualize a large React list?

Renders a measured window while preserving identity, scrolling, accessibility, dynamic sizes, and interaction state.

When do `memo`, `useMemo`, and `useCallback` actually improve a React application?

Treats memoization as measured performance work and accounts for prop identity, context, readability, and React Compiler.

Comparison questionHard~10 min

When is `useEffectEvent` appropriate, and when should a value remain an Effect dependency?

Separates reactive synchronization inputs from non-reactive logic that still needs the latest props or state.

Comparison questionHard~10 min

When should a Next.js route return not found, redirect, forbidden, or an error?

Separates missing resources, canonical navigation, authorization outcomes, expected failures, and unexpected exceptions.

Architecture scenarioHard~10 min

When should a React component expose an imperative handle?

Exposes a small focus, scroll, or media API while keeping component internals private and preferring declarative props.

Concept questionHard~10 min

When would you mark a React update as a Transition?

Keeps input and direct feedback urgent while rendering expensive navigation or result updates as interruptible work.

Comparison questionMedium~7 min

When would you use a Next.js layout instead of a template?

Connects layouts and templates to navigation, state lifetime, Effects, and deliberate remounting in the App Router.

Comparison questionEasy~5 min

When would you use a ref instead of state in React?

Distinguishes render-driving state from instance-local mutable values and DOM references.