Next.js Server Components: What Changed and Why It Matters

If you learned React before 2023, Server Components will feel strange. They break a mental model you have had for years. Here is why that is a good thing.

What Server Components actually change

Before Server Components, every component ran in the browser. Database calls, secret API keys, heavy libraries — all of it had to either live on the server in API routes or get serialized and sent down.

Server Components flip this. They run once on the server, return static UI, and never ship their dependencies to the client. A Server Component can query a database directly with zero JavaScript bundle impact.

The mental model shift

Stop thinking about components as UI. Think about them as the boundary between data and rendering.

• Server Component: fetch data, transform it, render static markup
• Client Component ('use client'): handle interaction, animation, browser APIs
• The boundary between them is explicit and intentional

A practical example

// This runs on the server — no bundle cost, no loading state
async function BlogList() {
  const posts = await getPublishedPosts(); // direct DB call
  return (
    <ul>
      {posts.map(post => (
        <li key={post.slug}>{post.title}</li>
      ))}
    </ul>
  );
}

// This runs on the client — needed for interaction
'use client';
function LikeButton({ postId }: { postId: string }) {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(true)}>{liked ? '♥' : '♡'}</button>;
}

Where people get confused

The most common mistake is adding 'use client' to every component. This defeats the purpose entirely. Add it only when you need hooks, event handlers, or browser APIs.

The second mistake is not understanding that Server Components cannot be imported inside Client Components. If you need a Server Component's data in a client context, pass it as a prop.

ISR and the fetch cache

Next.js lets you attach revalidation rules directly to fetch calls. This means your Server Components can be statically generated, ISR-cached, or always-fresh, per component:

// ISR — revalidate every hour
const data = await fetch(url, { next: { revalidate: 3600 } });

// Always fresh
const data = await fetch(url, { cache: 'no-store' });

Server Components are not a minor update. They are a different way of building web apps. The learning curve is real, but the payoff in performance and simplicity is worth it.