What does the App Router provide?
The App Router uses file-system routing and supports layouts, nested routes, loading and error handling, plus React features such as Server Components and Suspense. In an interview, explain the behavior you used rather than presenting the router as a generic performance guarantee.
Server Component or Client Component?
Use a Server Component for server-side data access and output that does not need browser state or event handlers. Introduce a Client Component at the boundary that needs state, effects, handlers, browser APIs, or custom hooks. Keep the interactive boundary as focused as the design allows.
What does use client actually mark?
It declares a client entry point. You do not need to add it to every file that becomes part of the client-side component tree. Props passed across the server-to-client boundary must be serializable. Explain this boundary before reaching for the directive everywhere.
How would you fetch data for a page?
Clarify freshness, personalization, authorization, failure behavior, and caching before selecting a location. Server-side fetching can keep credentials and database access away from the client bundle, but you still need authentication and authorization. Show loading and error behavior intentionally.
A page shows stale data after an update
Reproduce the path, identify where the value was cached, and distinguish browser, framework, data-source, and CDN behavior. Confirm the mutation succeeded and inspect invalidation or refresh expectations. Avoid disabling all caching before locating the stale layer.
How do you keep a Next.js page accessible?
Use semantic HTML, labels, keyboard access, meaningful focus, useful headings, and understandable loading and error messages. Server rendering does not automatically make an interaction accessible. Test the hydrated behavior with keyboard and assistive technology.
A practical Next.js mock task
Build a product detail page with server-fetched data and a small client-side favorite button. Explain why the interactive component owns only the state it needs. Add loading, not-found, and error behavior, then discuss what should happen when the API is slow or unavailable.
Sources checked
These official references support the guide. Product details and technical documentation can change; check the linked source for current information.
Where Cluegent helps
Cluegent supports permitted live workflows with transcript context, typed prompts, screenshot-aware answers, resume context, custom response behavior, quick action buttons, and a private desktop overlay. It is most useful when you already understand the subject and need help staying structured under pressure.
Frequently asked questions
Are Next.js pages Server Components by default?
In the App Router, layouts and pages are Server Components by default. Add a Client Component where browser interactivity or client APIs are needed.
Should every component use use client?
No. The directive marks a client entry point. Keep the boundary focused and pass serializable props across it.