React Server Components (RSC)

Next.js introduces React Server Components natively. Unlike traditional components that render in the browser, Server Components execute strictly on the server backend before any HTML is sent to the client.

Default Behavior

Inside the app/ router, all components act as Server Components by default. You do not need any special configuration.

Because they run on the server, you cannot use client-side logical hooks inside them.

• useState, useEffect, and useContext are strictly forbidden.
• Browser APIs like window.localStorage are forbidden.

However, they grant the ability to run secure backend operations natively without exposing API keys to the frontend.

Client Components

If you need interactivity (such as an onClick event listener or managing UI state), you must instruct Next.js to push that specific component code payload to the browser.

You do this by adding the "use client" directive at the absolute top of the file.

"use client";

import { useState } from 'react';

// This component will successfully hydrate in the user's browser
export default function Counter() {
  const [count, setCount] = useState(0);

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

Nesting Strategies

The ideal Next.js architecture utilizes a "leaves on a tree" concept.

• The Trunk: Root layouts and major data-fetching containers should be Server Components.
• The Leaves: Highly interactive elements like forms, buttons, or charts should be pushed down as deeply as possible into small isolated Client Components.

You can freely import Client Components into Server Components, but importing a Server Component inside a Client file forces the Server Component to execute on the Client, losing its backend security benefits.