Why When to keep components on server in NextJS? - Purpose & Use Cases

The Big Idea

Discover how keeping components on the server can make your app lightning fast and simpler to build!

The Scenario

Imagine building a website where every small change means you reload the entire page or write complex code to update parts manually.

You try to keep your UI fast and simple, but managing what runs on the server or client feels confusing and messy.

The Problem

Manually deciding which parts run on the server or client leads to slow loading, duplicated code, and bugs.

You waste time fixing issues caused by unnecessary client-side work or slow server responses.

The Solution

Next.js lets you keep components on the server easily, so they load fast and only send what the user needs.

This means less code in the browser, faster pages, and simpler development.

Before vs After

✗ Before

import { useEffect, useState } from 'react';

function Page() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetchData().then(setData);
  }, []);
  return <div>{data}</div>;
}

✓ After

export default async function Page() {
  const data = await fetchData();
  return <div>{data}</div>;
}

What It Enables

You can build fast, scalable apps that send only the needed HTML from the server, improving speed and user experience.

Real Life Example

An online store shows product lists rendered on the server so users see content instantly without waiting for client scripts.

Key Takeaways

Manual control of server vs client code is complex and error-prone.

Keeping components on the server improves speed and simplicity.

Next.js makes server components easy to use for better apps.