Client-Side Data Fetching in Next.js

Client-side data fetching happens inside the browser after the page loads. It is used when data is dynamic or user-driven.

What is Client-Side Data Fetching?

A Client Component fetches data using browser-side tools likeuseEffect. The UI updates after the data arrives.

How does it work?

"use client";

import { useEffect, useState } from "react";

export default function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

The browser loads the page first, then fetches data and updates the UI.

Why use Client-Side Data Fetching?

• Interactive dashboards
• User-triggered updates
• Live or frequently changing data
• Form-based fetching

Real-World Example

A social media feed loads additional posts after login or when a user clicks “Load More”.

Interview Tip

Client-side data fetching runs in the browser after rendering, ideal for interactive or user-driven data updates.