Skip to main content

React Server Components

Quick Answer: Companion guide mapping docs to Scrimba lessons. See below for the roadmap.

Last reviewed: March 2026.

React is moving from a client-side library to a full-stack framework architecture. Server Components allow you to render UI on the server, sending zero JavaScript to the client.

Who This Is For​

Learners following the React or Next.js roadmap.

Key Concepts​

1. Server Components vs Client Components​

  • Server Components: Render on the server. Great for fetching data, keeping secrets (API keys), and reducing bundle size. Cannot use hooks or event listeners.
  • Client Components: Render on the client (like traditional React). Use 'use client' at the top of the file. Use for interactivity (onClick, useState).
// Server Component (default)
async function ProductPage({ id }) {
  const product = await db.product.findUnique({ id }); // Direct DB access!
  return <Product details={product} />;
}

2. Server Actions​

Functions that run on the server, callable from the client. They replace API routes for simple mutations.

// Server Action
async function addToCart(formData) {
  'use server';
  await db.cart.add(formData.get('productId'));
}

// Client Component
<form action={addToCart}>
  <button type="submit">Add to Cart</button>
</form>

3. React 19: useActionState and useOptimistic​

React 19 adds hooks that work with Server Actions:

  • useActionState — replaces the deprecated useFormState. Manages pending state, errors, and return values from form actions.
  • useOptimistic — shows optimistic UI updates before the server responds (e.g., "liking" a post instantly).
  • use() — lets you read promises and context inside render (including conditionally).

4. The React Compiler​

The React Compiler (optional in React 19) automatically memoizes your components and values. You no longer need manual useMemo or useCallback for most cases — the compiler optimizes re-renders for you. See the React docs on the Compiler.

How to Learn This on Scrimba​

The best way to learn Server Components is through Next.js, the framework that pioneered them.

1. The Next.js App Router Course Learn how to build full-stack apps with the new App Router, which is built on RSCs.

2. The Fullstack Developer Path This career path covers the entire ecosystem: React, Next.js, Postgres, and deployment.

Choose This If​

Choose this page if: You're learning React or Next.js and want a docs-to-Scrimba roadmap.

Related Guides

Docs

Learn React Roadmap

→
Docs

React Course Catalog

→
Blog

Scrimba React Learning Path

→

Ready to Upgrade Your Learning?

Use our partner link to claim 20% off Scrimba Pro and unlock all courses and career paths.

Claim 20% Off Scrimba Pro (opens in a new tab)
Last updated on