Questions
7 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
07 / 27

Discuss best approaches with client components.

Difficulty: 6/10
client components, server components, hydration

To reduce the Client JavaScript bundle size, we recommend moving Client Components down your component tree. I.e. move the interactive logic to a Client Component (e.g. <SearchBar />) and keep your layout as a Server Component.

Scenario Questions

0-2 years experience

  1. 1How would you add an interactive button to a page that is currently a server component?
  2. 2What happens if you import useState inside a server component without adding the 'use client' directive?
  3. 3If you forget to put 'use client' at the top of a file that needs client‑side state, what error or behavior would you observe?

2-5 years experience

  1. 1You have a dashboard that fetches data on the server but also needs a sortable table with client‑side state. How would you split the components and why?
  2. 2During a code review you notice a client component being imported inside a server component, causing a runtime error. How would you debug and fix it?
  3. 3Explain the trade‑offs between keeping a component as a server component versus converting it to a client component when you need both SEO and interactivity.

5-8 years experience

  1. 1Your organization shares a UI library across several Next.js apps. How would you design that library to support both server and client components while keeping bundle size low?
  2. 2When scaling to thousands of concurrent users, what performance concerns arise from overusing client components, and how would you mitigate them?
  3. 3Describe how you would implement a feature‑flag system that can toggle a component between server‑rendered and client‑rendered modes without redeploying.

8+ years experience

  1. 1A legacy monolith is being migrated to a Next.js micro‑frontend architecture. How would you decide which parts become server components versus client components across multiple teams, and what governance would you put in place?
  2. 2What long‑term maintenance strategies would you adopt to prevent client component usage from causing bundle bloat and inconsistent rendering semantics across product lines?
  3. 3If you need to support both React 18 concurrent features and older browsers, how would you architect the client component layer to handle progressive enhancement and fallback rendering?

Follow-up Questions

  • Can you give an example where moving a component to the client caused a performance regression?
  • How do you measure the impact of client components on bundle size?
  • What tooling would you use to enforce correct component boundaries in CI?
Share

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