Why Fetch in server components in NextJS? - Purpose & Use Cases

The Big Idea

Discover how fetching data on the server can make your web pages feel instant and smooth!

The Scenario

Imagine building a web page where you manually fetch data on the client side after the page loads, causing a delay and flicker as content appears.

The Problem

Fetching data manually on the client can cause slow loading, extra network requests, and a poor user experience with visible loading states and layout shifts.

The Solution

Fetching data directly in server components lets the server gather all needed data before sending the page, so users see fully loaded content instantly without flicker.

Before vs After

✗ Before

useEffect(() => { fetch('/api/data').then(res => res.json()).then(setData); }, []);

✓ After

const data = await fetch('https://api.example.com/data').then(res => res.json());

What It Enables

This approach enables fast, seamless pages that load complete data on the server, improving speed and user experience.

Real Life Example

Think of an online store homepage that shows product lists immediately without loading spinners or layout jumps.

Key Takeaways

Manual client fetching causes delays and flicker.

Server components fetch data before rendering.

Users get faster, smoother page loads.