Why Server and client component composition in NextJS? - Purpose & Use Cases

The Big Idea

Discover how splitting your app into server and client parts can make your code cleaner and your site faster!

The Scenario

Imagine building a web page where you have to manually fetch data on the server, then send it to the client, and finally update parts of the page with user interactions all by hand.

You write separate code for fetching, rendering, and updating UI, juggling between server and client logic.

The Problem

This manual approach is slow and confusing because you must keep track of what runs on the server and what runs on the client.

It's easy to make mistakes like fetching data twice or mixing server-only code with client-only code, leading to bugs and poor performance.

The Solution

Server and client component composition lets you split your UI into parts that run on the server and parts that run on the client naturally.

You write components that focus on their job: server components fetch and prepare data, client components handle user interactions.

Next.js automatically combines them, so your app is fast and easy to maintain.

Before vs After

✗ Before

fetchData(); renderHTML(); addEventListeners(); // all separate steps

✓ After

<ServerComponent>
  <ClientComponent />
</ServerComponent>

What It Enables

This makes building fast, interactive web apps simple by letting you compose server and client parts seamlessly.

Real Life Example

Think of an online store page: the product details load quickly from the server, while the "Add to Cart" button reacts instantly on the client without reloading the page.

Key Takeaways

Manual server-client handling is complex and error-prone.

Composing server and client components separates concerns clearly.

Next.js handles the mix for better performance and simpler code.