Day 51 0f #100DaysOfCode — Server Components vs Client Components

Modern web applications require both performance and interactivity, with users expecting fast page loads and dynamic experiences. Traditionally, developers faced a trade-off between server-side rendering (SSR) for speed and client-side rendering (CSR) for interactivity, leading to complexity.
Next.js addresses this by introducing Server Components and Client Components, enabling a smart division of responsibilities between the server and the browser. This approach is the reason Next.js offers both server and client components.

For today, day 51, the goal was to understand what server and client components are in Next.js, what the difference is between them, and why they even exist.

---

What is a Server Component?

A Server Component in Next.js is a React component that runs only on the server. It never gets shipped to the browser, meaning:

• Smaller JavaScript bundle
• Better performance
• Direct access to backend resources (databases, APIs, secrets)

Example of a Server Component

// app/page.jsx

async function getData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function Page() {
  const data = await getData();

  return (
    <div>
      <h1>Server Component</h1>
      <p>{data.message}</p>
    </div>
  );
}

👉 This is how you normally write Next.js code, and this, by default, is a server component.

---

⚙️ Why are Components Server Components by Default?

Next.js defaults to Server Components because:

• Performance-first approach: Less JavaScript sent to the client
• Security: Sensitive logic stays on the server
• Smaller bundles: Faster load times
• Better SEO: Content is pre-rendered on the server

By making server components the default, Next.js encourages developers to build faster and more efficient applications without extra effort.

---

💻 What is a Client Component?

A Client Component is a component that runs in the browser. It is required when you need:

• State (useState)
• Effects (useEffect)
• Event handlers (onClick, onChange)
• Browser APIs (like localStorage)

To define a Client Component, you must explicitly add:

"use client";

Example of a Client Component

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Client Component</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

By adding "use client" above the codes, the default server component now becomes a client component

---

🤔 Why Do Client Components Exist?

If Server Components are so powerful, why do we even need Client Components?

Because not everything can happen on the server.

Client Components exist for:

• User Interactions (clicks, typing, animations)
• Real-time updates
• Dynamic UI behavior
• Browser-only APIs

Without Client Components, your app would be fast—but static and non-interactive.

---

Server vs Client Components (Side-by-Side Comparison)

Feature	Server Component 🖥️	Client Component 🌐
Runs on	Server	Browser
Default in Next.js	✅ Yes	❌ No
JavaScript sent	❌ Minimal	✅ Included
Interactivity	❌ No	✅ Yes
Access to DB/API	✅ Direct	❌ Via API calls
useState/useEffect	❌ Not allowed	✅ Allowed
SEO Friendly	✅ Excellent	⚠️ Depends
Performance	🚀 Faster	⚠️ Heavier

---

When to Use Server vs Client Components

Use Server Components when:

• Fetching data from a database or API
• Rendering static or semi-static content
• SEO is important
• You want better performance and smaller bundles

Use Client Components when:

• You need interactivity (buttons, forms, UI events)
• You use React hooks (useState, useEffect)
• You rely on browser APIs
• You’re building dynamic UI (modals, dropdowns, animations)

💡 Pro Tip:
Keep components as Server Components by default, and only convert to Client Components when absolutely necessary.

---

Final Thoughts

The introduction of Server and Client Components in Next.js is a game-changer for modern web development. It allows developers to build applications that are both highly performant and interactive, without compromising one for the other.

By understanding when to use each type, you can:

• Optimize performance
• Improve SEO
• Deliver better user experiences

Thanks for reading. Feel free to share your thoughts!