# Mastering React Server Components and the App Router
React Server Components (RSC) represent a paradigm shift in how we build React applications. By rendering components on the server, we can significantly reduce bundle sizes and improve performance.
## Understanding the Architecture
Unlike traditional SSR, Server Components are never sent to the client. This allows you to securely access databases and backend services directly within your component logic.
“`javascript
// Server Component
import db from ‘@/lib/db’;
export default async function UserList() {
const users = await db.query(‘SELECT * FROM users’);
return (
-
{users.map(user =>
- {user.name}
)}
);
}
“`
## Best Practices and Debugging
When debugging RSCs, remember that console.log statements will appear in your server terminal, not the browser console. Always separate client interactivity (using `”use client”`) from data fetching logic.