Skip to main content

React Server Components

Quick answer: RSC, Server Actions, and React 19 hooks confuse everyone at first—this page gives a plain-language map, then points to Scrimba’s Next.js material where you actually build.

This page summarizes React’s server-first stack: Server Components for data and leaner bundles, Client Components ('use client') for hooks and events, Server Actions for form mutations, and key React 19 hooks for actions and optimistic UI. It notes the optional React Compiler and treats Next.js as the practical place to learn RSC.

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.

Learn This on Scrimba​

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

Doc hubs on this site:

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.

Explore the Fullstack Path (opens in a new tab)

Choose this if​

You are learning React or Next.js and want a short conceptual bridge before Next.js on Scrimba and the Learn Next.js guides.

Full-stack learners: explore Scrimba Pro for the Fullstack Developer Path.

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