Questions
1 of 27
1What are client components?
2How to implement client rendering in next js?
3Describe how client components are rendered.
4How to decide what part should be rendered on the server and what on the client?
5Combining client and server components
6How to render a server component in the client component?
7Discuss best approaches with client components.
8Does using 'use client' ensure that the component only renders on the client?
9Explain the full lifecycle of a CSR page in Next.js — from initial HTML delivery to interactive UI.
10What is the difference between useEffect data fetching and React Query / SWR in a CSR context?
11When would you choose CSR over SSR or SSG in a production Next.js app? Give real-world examples.
12How does React's concurrent rendering model affect CSR behaviour in Next.js 13+?
13How do you handle deeply nested Client Components without causing unnecessary re-renders?
14Explain the concept of "client component boundaries" — how do they affect the component tree?
15How would you implement optimistic UI updates in a CSR-heavy Next.js application?
16What are the challenges of using Context API at scale in a CSR and SSR? How do you solve them?
17How does next/dynamic work? How is it different from React's lazy() and Suspense?
18What is the "flash of unstyled/unloaded content" problem in CSR, and how do you prevent it?
19How do you prefetch data for CSR pages in Next.js to reduce perceived latency?
20How do useMemo and useCallback help performance in CSR components? When are they overkill?
21How do you implement skeleton screens or loading states for CSR data fetching?
22Compare SWR vs React Query vs useEffect for client-side data fetching — when do you use each?
23How do you implement infinite scrolling or pagination purely on the client side in Next.js?
24How do you handle race conditions in CSR data fetching with useEffect?
25What is the difference between client-side fetch and server actions in Next.js App Router?
26How do you cancel in-flight API requests when a component unmounts in CSR?
27How would you handle real-time data (WebSockets / SSE) in a Next.js CSR component?
nextjsnextjs
Basics
Project Structure
Runtime
Compiler
SSG
SSR
CSR
Routing
Route Handlers
Route Groups
Dynamic Routes
Parallel Routes
Intercepting Routes
Middleware
Server Actions
APIS
Data Fetching
Caching
Clients
Optimisation
i18n
Security
Architecture
Deployment
Accessibility
01 / 27

What are client components?

Difficulty: 5/10
client components, use client directive, stateful behavior

Client Components allows you to write interactive UI that can be rendered on the client at request time. In Next.js, client rendering is opt-in, meaning you have to explicitly decide what components React should render on the client.

Benefits of client rendering:
  1. 1

    Interactivity: Client Components can use state, effects, and event listeners, meaning they can provide immediate feedback to the user and update the UI.

  2. 2

    Browser APIs: Client Components have access to browser APIs, like geolocation or localStorage.

Scenario Questions

0-2 years experience

  1. 1If you need a button that toggles a modal in a Next.js page, how would you decide whether to make it a client component, and what steps would you take to implement it?
  2. 2What happens if you forget to add the 'use client' directive at the top of a component that uses useState in the app directory?

2-5 years experience

  1. 1You added a third‑party chart library that requires the DOM, but the page is rendering as a server component and you get an error. Walk me through how you would debug and fix it.
  2. 2When converting an existing pages‑router page to the app router, you notice that a component that previously worked now throws 'ReferenceError: window is not defined'. Explain why this occurs and how you would resolve it.

5-8 years experience

  1. 1Our team is building a large e‑commerce site with many shared UI pieces. How would you decide which components should be client components versus server components to optimize performance and bundle size?
  2. 2We need to support server‑side rendering for SEO but also have interactive maps that rely on heavy client‑side libraries. Describe a strategy for structuring these parts using client components while minimizing the impact on initial load.

8+ years experience

  1. 1We are migrating a legacy Next.js 12 codebase to the new app directory. What architectural considerations and migration plan would you propose for handling the mix of client and server components across many teams?
  2. 2Imagine a future where we want to progressively hydrate only parts of the UI. How would you design a component library that abstracts the 'use client' requirement and allows teams to opt‑in to client behavior without scattering directives throughout the codebase?

Follow-up Questions

  • Can you give an example of a component that must stay server‑side?
  • How does the presence of a client component affect the server‑side rendering pipeline?
  • What trade‑offs do you consider when deciding to split a large component into client and server parts?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.