Server Data Fetching

🚀 Next.js Server Data Fetching: Your Kitchen to the World

Imagine you’re a chef in a magical kitchen. Before your restaurant opens, you prepare all the ingredients fresh from the farm. That’s exactly what Server Data Fetching does in Next.js—it gets your data ready BEFORE sending the page to your visitors!

🌟 The Big Picture

When you visit a website, someone needs to get the data (like posts, products, or user info). In Next.js, the server can fetch this data BEFORE the page reaches your browser.

Why is this awesome?

• ⚡ Pages load faster for visitors
• 🔒 Secret API keys stay hidden on the server
• 🔍 Search engines can read your content easily

Think of it like ordering pizza: the restaurant prepares everything BEFORE the delivery person brings it to your door. You don’t wait at home watching them make it!

📖 Chapter 1: Fetch in Server Components

The Story

In Next.js 13+, every component is a Server Component by default. This means they run on the server—like a chef working in the kitchen, not at your dinner table.

You can use fetch() directly inside these components!

How It Works

// app/users/page.tsx
async function UsersPage() {
  const response = await fetch(
    'https://api.example.com/users'
  );
  const users = await response.json();

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UsersPage;

💡 Key Points

Real Life: It’s like a librarian (server) finding your book and handing it to you, rather than you searching the whole library yourself.

📖 Chapter 2: Async Request APIs

The Story

Next.js gives you special helper functions that also work with async/await. These aren’t for fetching external APIs—they help you access request information like cookies, headers, and URL parameters.

The Helpers

graph TD
    A["Async Request APIs"] --> B["cookies"]
    A --> C["headers"]
    A --> D["params"]
    A --> E["searchParams"]

Example: Reading Cookies

import { cookies } from 'next/headers';

async function Dashboard() {
  const cookieStore = await cookies();
  const theme = cookieStore.get('theme');

  return (
    <div className={theme?.value}>
      Welcome to your dashboard!
    </div>
  );
}

Example: Reading Headers

import { headers } from 'next/headers';

async function Page() {
  const headersList = await headers();
  const userAgent = headersList.get('user-agent');

  return <p>You're using: {userAgent}</p>;
}

Remember: These functions are async now! Always use await with them.

📖 Chapter 3: Caching Fetch Requests

The Story

Imagine every time you want milk, you drive to the farm. Exhausting, right? What if you could keep milk in your fridge?

That’s caching! Next.js remembers data so it doesn’t have to fetch it again and again.

The Magic

By default, Next.js caches all fetch() requests automatically!

// This data is cached automatically!
const data = await fetch(
  'https://api.example.com/products'
);

How Caching Works

graph TD
    A["First Request"] --> B["Fetch from API"]
    B --> C["Store in Cache"]
    D["Second Request"] --> E{In Cache?}
    E -->|Yes| F["Use Cached Data ⚡"]
    E -->|No| B

💡 Benefits

📖 Chapter 4: The No-Store Option

The Story

Sometimes you DON’T want cached data. Imagine checking your bank balance—you need the REAL number, not yesterday’s!

How to Skip the Cache

const data = await fetch(
  'https://api.example.com/live-scores',
  { cache: 'no-store' }
);

This tells Next.js: “Always get fresh data!”

When to Use No-Store

Think of it like: Weather forecast vs. historical weather. One changes constantly, the other doesn’t!

📖 Chapter 5: The Revalidate Option

The Story

What if you want SOME caching, but also fresh data every now and then? Like checking the news—you don’t need updates every second, but every hour would be nice.

Time-Based Revalidation

const data = await fetch(
  'https://api.example.com/news',
  { next: { revalidate: 3600 } }
);
// Refreshes every 3600 seconds (1 hour)

How Revalidation Works

graph TD
    A["Request Arrives"] --> B{Is cache fresh?}
    B -->|Yes| C["Serve cached data ⚡"]
    B -->|No, expired| D["Serve stale data"]
    D --> E["Fetch new data in background"]
    E --> F["Update cache"]
    F --> G["Next request gets fresh data"]

Common Revalidate Times

📖 Chapter 6: All Fetch Cache Options

The Complete Menu

Next.js gives you full control over caching. Here’s your complete toolkit:

Option 1: Force Cache (Default)

fetch(url, { cache: 'force-cache' })

→ Use cached data. Only fetch once.

Option 2: No Store

fetch(url, { cache: 'no-store' })

→ Never cache. Always fetch fresh.

Option 3: Revalidate by Time

fetch(url, { next: { revalidate: 60 } })

→ Cache, but refresh every 60 seconds.

Option 4: Revalidate by Tag

fetch(url, { next: { tags: ['products'] } })

→ Cache until you manually invalidate the ‘products’ tag.

Quick Reference

📖 Chapter 7: generateStaticParams

The Story

Imagine you have a bookstore with 1000 books. Instead of creating pages for each book when someone visits, you could prepare ALL the book pages BEFORE the store opens!

That’s generateStaticParams!

The Problem It Solves

You have dynamic routes like /products/[id]. Without this, Next.js waits for visitors to generate each page. WITH this, pages are ready before anyone arrives!

How It Works

// app/products/[id]/page.tsx

// Step 1: Tell Next.js all possible IDs
export async function generateStaticParams() {
  const products = await fetch(
    'https://api.example.com/products'
  ).then(res => res.json());

  return products.map((product) => ({
    id: product.id.toString(),
  }));
}

// Step 2: Build each page
export default async function ProductPage({
  params
}: {
  params: { id: string }
}) {
  const product = await fetch(
    `https://api.example.com/products/${params.id}`
  ).then(res => res.json());

  return <h1>{product.name}</h1>;
}

The Result

graph TD
    A["Build Time"] --> B["generateStaticParams runs"]
    B --> C["Returns: id=1, id=2, id=3..."]
    C --> D["Next.js creates /products/1"]
    C --> E["Next.js creates /products/2"]
    C --> F["Next.js creates /products/3"]
    D --> G["All pages ready! ⚡"]
    E --> G
    F --> G

💡 Benefits

🎯 Putting It All Together

Here’s a real-world example using EVERYTHING we learned:

// app/blog/[slug]/page.tsx

// Pre-build all blog post pages
export async function generateStaticParams() {
  const posts = await fetch(
    'https://api.blog.com/posts',
    { next: { tags: ['posts'] } }
  ).then(res => res.json());

  return posts.map((post) => ({
    slug: post.slug,
  }));
}

// The actual page component
export default async function BlogPost({
  params
}: {
  params: { slug: string }
}) {
  // Cached and revalidated every hour
  const post = await fetch(
    `https://api.blog.com/posts/${params.slug}`,
    { next: { revalidate: 3600 } }
  ).then(res => res.json());

  // Comments always fresh
  const comments = await fetch(
    `https://api.blog.com/posts/${params.slug}/comments`,
    { cache: 'no-store' }
  ).then(res => res.json());

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      <section>
        <h2>Comments ({comments.length})</h2>
        {comments.map(c => (
          <p key={c.id}>{c.text}</p>
        ))}
      </section>
    </article>
  );
}

🌈 Summary: Your New Superpowers

🚀 You Did It!

You now understand how Next.js fetches data on the server like a pro! Remember:

1. Server = Kitchen — Prepare before serving
2. Cache = Fridge — Store for quick access
3. No-store = Fresh market — Always get new
4. Revalidate = Scheduled shopping — Update periodically
5. generateStaticParams = Pre-made meals — Ready before guests arrive

Go build something amazing! 🎉