Server Components vs Client Components

▲ Next.js Lesson 3 Beginner

Next.js divides components into two main categories: Server Components (rendered on the server for speed and SEO) and Client Components (rendered in the browser for interactivity).

1 Rendering Boundaries Rules

Choosing the correct component type optimizes application size and loading speed:

React Server Components (RSC): The default in the App Router. They render entirely on the server, sending zero client-side JavaScript to the browser. This is ideal for SEO-rich pages, database queries, and static layouts.
Client Components ("use client"): Opt-in by adding the `"use client"` directive at the very top of the file. Required for components that use browser APIs, react state hooks (useState, useEffect), or event listeners (onClick).

2 Separating Component Scopes

Let's check how to declare a client component with interactive state:

React — Client Component

"use client"; // Marks this file as a Client Component

import { useState } from 'react';

export default function CounterButton() {
  const [clicks, setClicks] = useState(0);

  return (
    <button onClick={() => setClicks(clicks + 1)}>
      Clicks Count: {{ clicks }}
    </button>
  );
}

3 Code Challenge

Challenge: Write an explanation of why you should keep your Client Components as far down the component tree as possible (component colocation), and how this optimization reduces JavaScript bundle sizes.