Server vs Client Components in Next.js (Made Simple)

on

 

If you're using Next.js (App Router), one important thing to understand is:

👉 Everything is server-side by default

Pages and layouts are Server Components, and you only use Client Components when needed.

Let’s break this down in the easiest way possible.

 The Big Idea

Next.js splits your app into two parts:

  • Server Components → run on the server

  • Client Components → run in the browser

You choose where your code runs based on what you need.



 Server Components (Default)

These run on the server and send ready-made HTML to the browser.

 Use them when you need:

  • Fetch data from APIs or databases

  • Keep secrets safe (API keys, tokens)

  • Better performance (less JavaScript)

  • Faster page load (better SEO)

Example:

export default async function Page() {
  const data = await fetch("https://api.com/posts").then(res => res.json())

  return <h1>{data.title}</h1>
}

👉 No "use client" needed
👉 Runs only on server

Client Components

These run in the browser and handle interactivity.

To create one, add:

"use client"

 Use them when you need:

  • Click events (onClick)

  • Forms and input handling

  • React hooks (useState, useEffect)

  • Browser APIs (localStorage, window)

Example:

"use client"

import { useState } from "react"

export default function LikeButton({ likes }) {
  const [count, setCount] = useState(likes)

  return (
    <button onClick={() => setCount(count + 1)}>
      ❤️ {count}
    </button>
  )
}

How They Work Together

You usually combine both.

Example:

// Server Component
import LikeButton from "./LikeButton"

export default async function Page() {
  const post = await getPost()

  return (
    <div>
      <h1>{post.title}</h1>
      <LikeButton likes={post.likes} />
    </div>
  )
}

✔ Server fetches data
✔ Client handles clicks

What Happens Behind the Scenes

On the server:

  • Next.js renders Server Components

  • Creates a special format called RSC Payload

  • Sends HTML + data to browser

On the client:

  • HTML shows instantly (fast load)

  • React hydrates the page (adds interactivity)

👉 Hydration = attaching click events to HTML

📦 Important Rule

👉 Once you add "use client":

  • That file AND all its children become client-side

So don’t overuse it ❌

⚖️ When to Use What

Use Server Components:

  • Blogs, product pages

  • Data fetching

  • SEO pages

  • Static UI

Use Client Components:

  • Buttons, forms

  • Modals, dropdowns

  • Interactive UI

💡 Best Practice

Keep most of your app server-side, and only use client where needed.

Example:

// Layout (Server)
import Search from "./Search"

export default function Layout({ children }) {
  return (
    <>
      <nav>
        <Search /> {/* Client */}
      </nav>
      {children}
    </>
  )
}

✔ Only small parts use JS
✔ Faster performance

🔐 Bonus: Keep Secrets Safe

Server Components can use:

process.env.API_KEY

Client Components ❌ cannot access this securely.

🧩 Extra Tips

  • You can pass data from Server → Client using props

  • Props must be serializable

  • Use Client Components for context (theme, auth, etc.)

🏁 Final Summary

  • Server Components = fast, secure, no interactivity

  • Client Components = interactive, runs in browser

  • Use both together for best results

👉 Rule of thumb:
Start with Server, add Client only when needed

This approach makes your Next.js apps faster, cleaner, and more scalable 

Comments

Post a Comment