Server Components aren't SSR!

Source: Dev.to

SSR vs. React Server Components

The SSR Analogy

• Traditional SSR: The server renders the entire page to an HTML string, sends it to the browser, and the client then downloads a large JavaScript bundle to “hydrate” the page. Even static parts (e.g., a footer) end up in that bundle, which can be wasteful.

• SSR Flow

  1. Request – The browser asks for a page.
  2. Render – The server generates a full HTML string.
  3. Delivery – The browser displays the HTML immediately.
  4. Hydration – The client downloads JavaScript and attaches event listeners. Until hydration finishes, the UI is non‑interactive.

The RSC Analogy

React Server Components don’t send HTML. Instead, they send a serialized description of the UI (a JSON‑like tree). The client receives only what it needs to render, while the heavy logic stays on the server.

• Zero Bundle Size – Code that lives only in a Server Component never leaves the server, keeping the client bundle small.
• Direct Data Access – Server Components can query databases directly, eliminating extra API layers.
• Selective Interactivity – Only the parts that need client‑side behavior are marked with use client and become Client Components.

Example Server Component

// 🥩 The Server Component (The Steak)
// No 'use client' here. We are in the kitchen!
import { db } from './vibe-database';

export default async function MusicPlaylist() {
  const songs = await db.query('SELECT * FROM bachata_hits'); // Direct DB access!

  return (
    
      
## Party Mix 🎶

      {songs.map(song => (
        
          
{song.title} - {song.artist}

          {/* Import interactivity only where needed */}
          
        
      ))}
    
  );
}

Guidelines for Mixing Server and Client Components

• use client Boundary: Place use client only on leaf components that need interactivity. Adding it at the top level turns the whole tree into a client bundle.
• No Hooks in Server Components: useState, useEffect, and similar hooks are unavailable in Server Components; attempting to use them will cause a compile‑time error.
• Streaming & Suspense: Wrap async parts in “ to stream UI progressively, similar to how VAR reviews pause play but keep the match moving.

Feature Comparison

Practical Advice

• Start with Server Components: Treat them as the default “home base.”
• Add Client Components only when needed: For clicks, hovers, or local state, move that leaf node to a Client Component.
• Think of the server as the kitchen: Keep heavy processing (data fetching, rendering) there, and send only the “seasoning” (interactive bits) to the client. This reduces bundle size and improves performance on low‑end devices.

Keep the conversation going by exploring more about React Server Components and their impact on modern web development.