RSC Directives Reference — use client and use server Complete Guide

In this tutorial, you will learn about RSC Directives Reference. We cover key concepts, practical examples, and best practices to help you master this topic.

RSC directives are string literals at the top of files that determine whether code runs on the server or client. Two directives exist: 'use client' and 'use server'.

What You'll Learn

You will get a complete reference for both RSC directives, their syntax, placement rules, scope, and interactions with bundlers and the module graph.

Why It Matters

Directives define the server-client boundary in your application. Misusing them causes build errors, broken interactivity, or security vulnerabilities.

Real-World Use

Every React Server Component application uses these directives. DodaTech's codebase has exactly one 'use client' directive for every interactive component file and one 'use server' directive per action module.

flowchart TD
    A[React File] --> B{First line?}
    B --> C["'use client'"]
    B --> D["'use server'"]
    B --> E[Neither]
    C --> F[Client Component]
    C --> G[Can use hooks]
    C --> H[Can use browser APIs]
    D --> I[Server Action File]
    D --> J[All exports are actions]
    E --> K[Server Component]
    E --> L[Default for App Router]
    E --> M[Can use async]
    style C fill:#0f172a,color:#fff
    style D fill:#1e293b,color:#fff
    style E fill:#1e293b,color:#fff

The use client Directive

Placed at the top of a file to mark it as a Client Component boundary.

'use client';

import { useState, useEffect } from 'react';
import { format } from 'date-fns';

export function Clock() {
  const [time, setTime] = useState(new Date());
  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);
  return <p>Current time: {format(time, 'HH:mm:ss')}</p>;
}

export function Timer({ initial }) {
  const [count, setCount] = useState(initial);
  return (
    <div>
      <p>{count} seconds</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

Expected output: Both exported components are Client Components. They can use hooks, handle events, and access browser APIs. The 'use client' directive applies to the entire file.

The use server Directive (File Level)

Placed at the top of a file to make all exported functions Server Actions.

'use server';

import { db } from '@/lib/database';
import { revalidatePath } from 'next/cache';

export async function createItem(formData) {
  const name = formData.get('name');
  await db.items.create({ name });
  revalidatePath('/items');
  return { success: true };
}

export async function deleteItem(id) {
  await db.items.delete(id);
  revalidatePath('/items');
  return { success: true };
}

// Internal helper — not exported, not a Server Action
async function validateItem(data) {
  if (!data.name) throw new Error('Name required');
}

Expected output: createItem and deleteItem are Server Actions callable from the client. validateItem is an internal helper that runs on the server only.

The use server Directive (Inline)

Placed inside an async function body to make only that function a Server Action.

export default async function PostPage({ params }) {
  async function addComment(formData) {
    'use server';
    const text = formData.get('text');
    const postId = params.id;
    await db.comments.create({ postId, text });
    revalidatePath(`/posts/${postId}`);
    return { success: true, text };
  }

  async function deleteComment(commentId) {
    'use server';
    await db.comments.delete(commentId);
    revalidatePath(`/posts/${params.id}`);
    return { success: true };
  }

  return (
    <div>
      <form action={addComment}>...</form>
    </div>
  );
}

Expected output: Both addComment and deleteComment are Server Actions. They have access to the component's props and closures (params.id).

Directive Rules and Restrictions

Both directives have strict placement and syntax rules.

// CORRECT: Directive as first line
'use client';
import { useState } from 'react';

// INCORRECT: Import before directive
import { useState } from 'react';
'use client'; // ERROR: directive must be first

// INCORRECT: Not a string literal
const directive = 'use client'; // ERROR: must be literal

// INCORRECT: With other code before
// This is a comment
'use client'; // ERROR: comment before directive

Expected output: The directive must be the very first line of the file with no preceding code, comments, or blank lines.

Directive Interactions

How the directives interact with imports and the module graph.

// server-component.js — NO directive
import { ClientWidget } from './client-widget';
import { ServerWidget } from './server-widget';
export default function Page() {
  return (
    <div>
      <ClientWidget />     // OK: importing Client in Server
      <ServerWidget />     // OK: importing Server in Server
    </div>
  );
}

// client-widget.js — WITH 'use client'
import { useState } from 'react';
import { AnotherClient } from './another-client'; // OK
// import { ServerWidget } from './server-widget'; // ERROR
export default function ClientWidget() { ... }

Expected output: Server Components can import both Server and Client Components. Client Components can only import other Client Components. Importing Server Components into Client Components throws a build error.

Common Mistakes

1. Putting blank lines before the directive: The directive string must be the first line. Any blank line or comment before it causes the directive to be ignored.

2. Using use client in a file that exports only utility functions: Utility functions do not need the directive. Only React component files need it.

3. Using use server in a client file: A file cannot have both 'use client' and 'use server'. They are mutually exclusive. Use server actions in separate files or inline in Server Components.

4. Forgetting that directives are file-scoped: You cannot mark individual components within a file. The directive applies to the entire file.

5. Typing the directive incorrectly: It must be exactly 'use client' or 'use server'. Typos like 'useclient' or 'use-server' are ignored.

Practice Questions

1. What is the difference between use client and use server?

use client marks a file for client-side rendering with access to hooks. use server marks exported functions as Server Actions callable from the client.

2. Can a file have both directives?

No. A file can have only one directive. Use separate files for Client Components and Server Actions.

3. What happens if you put use server inside a function in a use client file?

The function-level use server is still valid. However, the client bundle includes the function reference, making it less secure.

4. Why must the directive be the first line?

Bundlers and parsers look for the directive string as the first line to determine how to Process the file.

5. How does the module graph enforce directive rules?

The bundler prevents Client Components from importing Server Components. Any violation causes a build error.

Challenge

Analyze a given file structure and identify which files need 'use client', which need 'use server' (file-level), which use inline 'use server', and which need no directive.

Frequently Asked Questions

Mini Project

Create three files: a Server Component page that fetches data, a Client Component for interactive features that uses hooks, and a Server Action file for form submissions. Use the correct directives in each file.

What's Next

Learn about RSC Caching to optimize data fetching performance.