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

How do you implement infinite scrolling or pagination purely on the client side in Next.js?

Implement client-side infinite scrolling in Next.js using a combination of a client component with state for pagination, a data-fetching function, and the Intersection Observer API to trigger loading when the user scrolls to the bottom

Implementing infinite scrolling purely on the client side in Next.js involves creating a client component that manages pagination state, fetches data when the user scrolls to the bottom, and appends new items to the existing list. This approach works well for pages where SEO for the paginated content isn't critical or when the data is user-specific. The key pieces are a 'use client' component, state for tracking pages and items, a function to fetch more data, and an intersection observer to detect when the user reaches the end of the list .

The most straightforward implementation uses React hooks (useState, useEffect) to manage pagination state and trigger data fetching. You'll maintain state for the list of items, the current page or offset, and whether there's more data to load. An intersection observer ref attached to a sentinel element at the bottom of the list detects when the user scrolls near the end and triggers the next page fetch .

Basic Client-Side Infinite Scroll Implementation

A more convenient approach is to use the react-intersection-observer library, which provides a custom hook useInView that simplifies intersection detection. This eliminates the need to manually create and manage IntersectionObserver instances .

Simplified with react-intersection-observer

For applications that need caching and automatic revalidation, SWR provides the useSWRInfinite hook. This hook handles pagination state, caching, and request deduplication automatically. It's particularly useful when the same paginated data might be accessed from multiple components or when you need background revalidation .

SWR Infinite Implementation

React Query (TanStack Query) offers useInfiniteQuery, which provides even more features like query cancellation, background refetching, and devtools. It's the most feature-rich option for complex applications .

React Query Infinite Implementation
Choosing the Right Approach
  1. 1

    Basic useState/useEffect: Best for simple applications with minimal data requirements where you want full control without external dependencies .

  2. 2

    react-intersection-observer: Add this library to any approach to simplify intersection detection—it's lightweight and works with both manual and library-based data fetching .

  3. 3

    SWR Infinite: Ideal when you need caching, request deduplication, and automatic revalidation with minimal configuration. Great for REST APIs .

  4. 4

    React Query: Best for complex applications with advanced requirements like mutations, optimistic updates, and devtools. The most feature-complete option .

When implementing infinite scroll, always provide visual feedback during loading, handle empty states gracefully, and ensure proper cleanup of observers. Use skeleton loaders instead of simple text indicators for better UX. Consider adding a retry mechanism for failed requests and always check for the end of data to prevent unnecessary API calls . For SEO-critical content, combine this client-side approach with server-side initial data fetching so search engines see the first page of content .