⚙️ Server vs Client Components in Next.js v15 — What’s the Difference?

If you’ve used plain React with create-react-app or Vite, you’re used to writing components that run entirely in the browser — these are called Client Components.

But with Next.js, things change dramatically. You now have two types of components:

• 🖥️ Server Components (default in Next.js)

• 🧠 Client Components (for interactive features)

Let’s break it down in simple words. 👇

---

🔧 What Are Server Components?

In Next.js, all components are Server Components by default.

This means:

• They are rendered on the server, not the browser

• They don’t have access to browser-only APIs (like window, document)

• You can’t use React hooks like useState, useEffect inside them

• They return pre-rendered HTML to the browser

Example:

export default function HomePage() {
  console.log('Rendering on server');
  return <h1>Hello from the server!</h1>;
}

When you open this page in your browser, you won’t see the log in your DevTools console.
Instead, the log shows up in your terminal, proving that the component ran on the server.

---

🤯 Why This Matters

• Faster page loads: No JS needed to render static content

• Better SEO: Search engines get fully rendered HTML

• Smaller bundle sizes: Less JavaScript sent to the browser

✅ Server Components are great for:

• Static pages

• Displaying content from a CMS or database

• Components that don’t need user interaction

---

🧠 What Are Client Components?

Sometimes you need components to:

• Use state (useState, useEffect)

• Respond to user actions (onClick)

• Manage timers, animations, local storage, etc.

In those cases, you need a Client Component.

To define one, you just add a special directive at the top of your file:

'use client'; // 👈 This turns it into a Client Component

import { useState, useEffect } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

This code now runs in the browser, not the server.

---

---

🧪 Real-Life Example: Image Slideshow

Let’s say you have an image slideshow that swaps images every 5 seconds using useEffect and setInterval.

This logic only makes sense in the browser, not on the server.

So you turn it into a Client Component:

'use client';

import { useEffect, useState } from 'react';

export default function ImageSlideshow() {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setIndex((prev) => (prev + 1) % 3);
    }, 5000);
    return () => clearInterval(timer);
  }, []);

  return <img src={`/images/image-${index}.jpg`} />;
}

✅ Now it works as expected — it only runs in the browser and swaps images interactively.

---

🔄 What Happens When You Mix Both?

You can mix Server and Client Components freely.

For example:

// app/page.js (Server Component)
import ImageSlideshow from '../components/image-slideshow';

export default function HomePage() {
  return (
    <main>
      <h1>Welcome</h1>
      <ImageSlideshow />
    </main>
  );
}

The HomePage component runs on the server, but the ImageSlideshow component runs on the client.

Next.js will automatically split the JavaScript bundle and handle rendering intelligently.

---

🧠 Quick Summary

---

🔍 Pro Tips

• Don’t make everything a Client Component. Only use it when needed.

• Server Components are faster, smaller, and better for SEO.

• Always remember to put 'use client'; at the top of the file if you need client-side behavior.