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

How does next/dynamic work? How is it different from React's lazy() and Suspense?

next/dynamic is a Next.js wrapper around React.lazy and Suspense that extends them with framework-specific features like SSR control, named export support, and server-side compatibility in Server Components

Next.js's next/dynamic builds upon React's native lazy loading primitives (React.lazy and Suspense) but adds critical framework-specific functionality. While React.lazy is limited to client-side execution and requires default exports, next/dynamic provides server-side rendering control, named export support, and importantly, works seamlessly inside React Server Components [citation:2]. The official documentation describes it as a 'composite of React.lazy and Suspense,' but in practice, it's a more powerful abstraction tailored for Next.js's hybrid rendering model [citation:2][citation:1].

Key Differences Between next/dynamic and React.lazy
  1. 1

    Server Component support: React.lazy cannot be used in Server Components and will throw an error; next/dynamic works perfectly in Server Components for conditional client component loading [citation:8]

  2. 2

    SSR control: next/dynamic provides the ssr: false option to completely disable server-side rendering, which React.lazy cannot do [citation:2][citation:4]

  3. 3

    Named exports: React.lazy only works with default exports; next/dynamic allows importing named exports via a then() callback [citation:2][citation:9]

  4. 4

    Built-in loading UI: next/dynamic includes a loading option that renders a placeholder during import, while React.lazy requires a separate Suspense boundary [citation:1][citation:4]

  5. 5

    Preloading: next/dynamic automatically handles preloading optimizations that must be manually implemented with React.lazy [citation:2]

next/dynamic Usage Examples

React's native lazy loading mechanism consists of two complementary APIs: React.lazy() for component code splitting and Suspense for handling loading states. React.lazy() accepts a function that returns a dynamic import promise, which must resolve to a module with a default export [citation:3][citation:5]. The loaded component must be wrapped in a Suspense boundary that provides a fallback UI during loading [citation:7][citation:10]. This combination is perfect for client-side React applications but has significant limitations in Next.js: it cannot be used in Server Components, offers no server-side rendering control, and only works with default exports [citation:8].

React.lazy with Suspense Example
Important Behavioral Nuances
  1. 1

    Path requirement: In next/dynamic, the import path must be a string literal, not a variable or template string, to enable proper webpack bundling [citation:2]

  2. 2

    Double loading states: If your dynamically imported component also fetches data with Suspense-enabled libraries, you'll see two separate loading UIs unless you coordinate the fallbacks [citation:1]

  3. 3

    Suspense in Server Components: Suspense works in Server Components for async operations, but not with React.lazy—use next/dynamic instead [citation:8]

  4. 4

    Default SSR behavior: By default, next/dynamic attempts server-side rendering; set ssr: false explicitly for client-only components [citation:2][citation:4]