The Two Worlds

React introduced two special keywords: use client and use server.

These help developers cleanly connect frontend and backend code—almost like you’re writing one single program that runs across two machines.

🚪 Think of Them as Two Doors

We need to think of Client and Server Components as two doors.

use client = lets the server send code to the client (as a <script>).

use server = lets the client call functions on the server (like a fetch).

These directives make this interaction part of your code structure. Instead of treating backend and frontend as completely separate, these tools let you import and export code across that boundary in a structured, predictable way.

🔧 Example with use server:

Imagine your backend has a function to “like a post”:

'use server';

export async function likePost(postId) {
  // store like in the database
}

On the frontend, instead of writing a fetch() manually, you just do:

import { likePost } from './backend';

await likePost(postId); // Automatically turns into a fetch

React handles turning that import into an HTTP request to the server for you.

  • ✅ Less boilerplate
  • ✅ You still get type checking and auto-complete
  • ✅ It’s just like calling a regular function—even though it’s on another computer

Dan argues that this server and client model is as fundamental as if/else, async/await, or first-class functions. It makes client-server apps:

  • Easier to write
  • More modular
  • Type-safe
  • Tool-friendly (like code search, dead code detection)

You're no longer writing two separate apps that talk over REST APIs. You're writing one unified program that runs in two places.

🔧 Example with 'use client':

Now flip the situation.

You want your server-rendered page to include a Like button that runs client-side JS when clicked. In old days, you had to manually include a <script> and write JS separately.

Instead, you can now write:

'use client';

export function LikeButton({ postId, liked }) {
  return <button>{liked ? 'Unlike' : 'Like'}</button>;
}

Then, in your server code:

import { LikeButton } from './LikeButton';

return (
  <html>
    <body>
      <LikeButton postId={123} liked={true} />
    </body>
  </html>
);

React turns that into a script that runs on the client and handles the interactivity.

✅ Server sends HTML ✅ Client takes over interactivity ✅ Easy to pass data from server to client

Resources

The Course is launching in Early Access! 🎉

The Modern Full Stack Next.js Course is launching in Early Access only to the folks on the waitlist in a couple of weeks.
Feedback