Questions
2 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
02 / 27

How to implement client rendering in next js?

Difficulty: 5/10
client-side rendering, hydration, dynamic import
  1. 1

    To use Client Components, you can add the React 'use client' directive at the top of a file, above your imports. 'use client' is used to declare a boundary between a Server and Client Component modules. This means that by defining a 'use client' in a file, all other modules imported into it, including child components, are considered part of the client bundle - and will be rendered by React on the client.

  2. 2

    'use client' doesn't need to be defined in every component that needs to be rendered on the client. Once you define the boundary, all child components and modules imported into it are considered part of the client bundle.

Scenario Questions

0-2 years experience

  1. 1We have a simple Next.js page that needs to display a list of items fetched from an API, but we want the fetch to happen only on the client. How would you set that up?
  2. 2If you add the 'use client' directive to a component and it still renders on the server, what could be going wrong?
  3. 3What happens if you try to use useEffect in a component that is rendered server‑side?

2-5 years experience

  1. 1You need to add a chart library that only works in the browser to an existing Next.js page that is currently server‑rendered. Walk me through how you would integrate it without breaking SSR.
  2. 2During a feature rollout, a page that was previously SSR now shows a blank screen after you switched it to client rendering. How would you debug the issue?
  3. 3Explain the trade‑offs you consider when deciding to make a particular page client‑rendered versus keeping it server‑rendered.

5-8 years experience

  1. 1Our application has dozens of pages, and we want to move a subset to client rendering to improve interactivity. How would you design a strategy to identify and migrate those pages while minimizing performance regressions?
  2. 2Describe how you would implement a shared layout that stays server‑rendered while its child components are client‑rendered, and what pitfalls to watch for.
  3. 3At scale, how do you ensure that client‑rendered pages don’t cause excessive bundle size or hydration delays? Discuss tooling and metrics you’d use.

8+ years experience

  1. 1We are planning a long‑term migration from a fully SSR Next.js monolith to a hybrid architecture with many client‑rendered micro‑frontends. What architectural guidelines would you establish to keep the codebase maintainable across teams?
  2. 2How would you evaluate the impact of moving critical SEO pages to client rendering on our overall traffic, and what mitigation strategies would you propose?
  3. 3If multiple teams need to share a client‑rendered component that depends on different data sources, how would you design an abstraction layer to avoid duplication and keep the rendering logic consistent?

Follow-up Questions

  • What are the performance implications of using client rendering for this page?
  • How would you handle SEO for a page that must be client‑rendered?
  • Can you describe a situation where mixing SSR and CSR caused a bug, and how you fixed it?
Share

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