When moving to the Next.js App Router, it's tempting to default to 'use client' to keep old data-fetching logic working. But too much client rendering usually adds hidden performance cost.

We've all seen it: you load a dashboard and watch multiple skeleton loaders while the browser fetches data. It feels jumpy, causes layout shifts, and hurts SEO.

There is a cleaner approach: use React Server Components by default.

The Problem with Client Components

Client components load a JavaScript bundle in the browser, parse it, and then execute it to fetch your data via tools like SWR or react-query.

During that whole process, your users are staring at a skeleton.

'use client';
 
import useSWR from 'swr';
import { fetcher } from '@/lib/fetcher';
 
export function DashboardPanel() {
  const { data, isLoading } = useSWR('/api/data', fetcher);
 
  if (isLoading) return <div className="animate-pulse">Loading...</div>;
  
  return <div>{data.title}</div>;
}

This works well when you need browser interactivity (like onClick handlers, state updates, or browser APIs). But for static or slowly changing data, it makes the browser do extra work.

The Fix: Server Components

Server Components run entirely on your backend before the HTML is even sent to the browser.

Next.js essentially pauses rendering, waits for your data to resolve, bakes that data right into the HTML structure, and ships it.

import { getData } from '@/lib/api';
 
export async function DashboardPanel() {
  const data = await getData();
 
  return <div>{data.title}</div>;
}

This is much cleaner. No useSWR, no useEffect, and often no loading states. The user loads the page and data is already there, with less layout jumping.

The Caching Benefit

Here is where Server Components pull ahead: caching.

When you configure caching on fetch calls (like next: { revalidate: 3600 }), Server Components use it directly. If cache is valid, Next.js returns pre-rendered HTML very fast.

If you apply that same 1-hour cache to Client Components, the browser still has to download JavaScript, parse it, and make a network request. Even when the endpoint is cached, users can still see a short skeleton flash.

Server Components completely eliminate that round-trip.

SEO Benefit

Search engines do not want to wait for JavaScript execution to understand your page.

Because Server Components pre-render HTML, Google can see your content immediately. For blogs, e-commerce, and public pages, this is a strong SEO advantage.

When to use which?

Keep it simple:

• Use Server Components (the default) for fetching data, accessing backend resources, or rendering static UI.
• Use Client Components ('use client') only when you need interactivity: useState, event listeners (onClick), or accessing browser-only APIs like window.

Have you moved a feature from Client to Server Components and seen a speed difference? Tell me your result on X @yhabibf.