Overview

Client Components run in the browser and are ideal for fetching data based on user interactions. Unlike Server Components, they fetch data on the client-side after the initial render, making them well-suited for dynamic, interactive features.

Core Concepts

Example

In this example, the component fetches data from an API after mounting. If the data isn’t available yet, a loading message is displayed.

"use client";

import { useEffect, useState } from "react";

export default function DashboardClient() {
  const [data, setData] = useState<{ title: string } | null>(null);

  useEffect(() => {
    // Fetch data when the component mounts.
    fetch("<https://api.example.com/data>")
      .then((res) => res.json())
      .then((json) => setData(json))
      .catch((error) => console.error("Fetch error:", error));
  }, []);

  if (!data) {
    return <p>Loading...</p>;
  }

  return (
    <section>
      <h1>Data: {data.title}</h1>
    </section>
  );
}

When to Use

Advantages

Limitations