Why data fetching differs in Next.js - The Real Reasons

The Big Idea

Discover how Next.js makes your pages load faster and smarter by changing when and where data is fetched!

The Scenario

Imagine building a website where you have to fetch data from a server every time a user visits a page. You write code to get the data manually on the client side, but the page feels slow and sometimes shows empty content before loading.

The Problem

Manually fetching data on the client can cause delays, flickering content, and poor search engine visibility. You also have to write extra code to handle loading states and errors, making your app more complex and harder to maintain.

The Solution

Next.js changes the game by letting you fetch data on the server before the page loads or even at build time. This means pages can show complete content immediately, improving speed, SEO, and user experience without extra client-side code.

Before vs After

✗ Before

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

✓ After

export async function getServerSideProps() { const data = await fetchData(); return { props: { data } }; }

What It Enables

This approach enables fast, SEO-friendly pages that load with data ready, giving users a smooth and reliable experience.

Real Life Example

Think of an online store where product details appear instantly when you open a page, instead of waiting for the browser to fetch them after the page loads.

Key Takeaways

Manual client-side fetching can cause slow and incomplete page loads.

Next.js fetches data on the server or at build time for faster, complete pages.

This improves SEO, user experience, and simplifies your code.