How do you differentiate between server and client components in Next.js?

In Next.js, components are Server Components by default. To differentiate and create Client Components, you need to add the "use client" directive at the top of the component file.

• Server Components: These run on the server and can access server-side resources like databases and file systems. They do not include any client-side JavaScript in the bundle.

  // app/page.js - This is a Server Component
  async function ServerComponent() {
    const data = await fetch("https://api.example.com/data");
    const result = await data.json();

    return (
      <div>
        <h1>Server Rendered Data</h1>
        <p>{result.message}</p>
      </div>
    );
  }
  

• Client Components: These run on the client side and can use React hooks, manage state, and handle user interactions. They must include the "use client" directive.

  // app/components/ClientComponent.js
  "use client";

  import { useState } from "react";

  export default function ClientComponent() {
    const [count, setCount] = useState(0);

    return (
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
    );
  }
  

Use Server Components for static content and data fetching, and Client Components for interactivity and state management.