Before we start

This page explains the basics of React Server Components (RSC)—a fundamental architectural concept that underpins Next.js routing implementation.

React Server Components overview

React Server Components introduce a new architecture that splits React components into two types:

1. Server components
2. Client components

Server components

Next.js treats all components as server components by default. These components:

• Can perform server-side operations like file reading and database queries
• Cannot use React hooks
• Cannot handle user interactions

Client components

To create a client component, add the "use client" directive at the top of your component file. Client components:

• Cannot perform server-side operations
• Can use React hooks
• Can handle user interactions
• Behave like traditional React components from previous versions

Why this matters

As we get into routing in the next section, you’ll see practical examples of both component types. You’ll encounter:

• Server components that complete operations before rendering content
• Client components that use routing module hooks

We’ll dive deeper into RSCs in a dedicated section later in the documentation but these fundamentals will help you better understand the routing concepts covered in the next section.