_Index

Introduction to React Server Components — What They Are and Why They Matter

React Server Components explained: learn what RSC are, how they differ from SSR and CSR, and why they reduce client-side JavaScript while improving performance.

Server Components vs Client Components — When to Use Each

Learn the difference between React Server Components and Client Components, when to use each type, and how to split your component tree across the server-client boundary.

The use client Directive — Marking the Server-Client Boundary

Learn how the use client directive marks the boundary between server and client rendering in React, its rules, and best practices for placement.

Data Fetching in Server Components — Async/Await with Databases and APIs

Learn how to fetch data in React Server Components using async/await, direct database queries, and fetch API with Next.js caching options.

Async Components — Writing Server Components with async/await

Learn how to write async React Server Components using async/await, handle promises, and combine multiple data sources in a single component.

Streaming and Suspense — Progressive HTML Delivery in React

Learn how React streaming and Suspense work together to send HTML progressively, improve perceived performance, and reduce time-to-first-byte.

Server Actions — Server-Side Mutations from Client Components

Learn how Server Actions enable server-side mutations directly from the browser without creating API routes, using the use server directive.

Form Actions — Advanced Form Handling with Server Actions

Learn advanced form handling patterns with Server Actions including validation, pending states, error handling, and optimistic updates in React.

The use server Directive — Defining and Organizing Server Actions

Learn how the use server directive works, how to organize Server Actions in separate files, and best practices for naming and structuring actions.

Client Components Deep Dive — Interactivity in the Browser

Learn how Client Components handle interactivity, state, effects, and browser APIs while working alongside Server Components in React.

Composing Server and Client Components — Architecture Patterns

Learn patterns for composing React Server and Client Components together, including the wrapper pattern, prop passing, and avoiding common composition pitfalls.

Serializable Props — What Can Cross the Server-Client Boundary

Learn what data types can be passed as props from Server Components to Client Components, and avoid common serialization errors.

Context in Server Components — Patterns for Shared State

Learn how React Context works with Server Components, where to place providers, and patterns for sharing data between Server and Client Components.

Client Bundle Optimization — Minimizing JavaScript with RSC

Learn how React Server Components reduce client bundle size, and techniques for optimizing what JavaScript ships to the browser.

Next.js App Router and RSC — Building Full Applications

Learn how React Server Components integrate with Next.js App Router, including layouts, loading states, error boundaries, and route groups.

RSC Directives Reference — use client and use server Complete Guide

Complete reference for React Server Component directives: use client and use server, their placement, rules, and common usage patterns.

RSC Caching Strategies — Optimizing Data Fetching Performance

Learn caching strategies for React Server Components including fetch caching, data cache, full route cache, and revalidation patterns.

RSC and Routing — Navigation, Params, and Route Handlers

Learn how React Server Components interact with routing in Next.js App Router, including dynamic params, search params, and route handlers.

RSC Performance Patterns — Optimizing Server Component Applications

Learn performance optimization patterns for React Server Components including streaming, caching, component splitting, and data loading strategies.

RSC Mini Project — Building a Complete Server Components Application

Build a complete React Server Components application from scratch combining data fetching, streaming, Server Actions, and client interactivity.