Fetching Data in Server Components

One of the most powerful features of Server Components is the ability to fetch data directly in your components using async/await—no useEffect, no loading states, no client-side requests. Data fetching happens on the server, your component renders with that data, and users see a fully-loaded page instantly. This approach is simpler, faster, and more SEO-friendly than traditional client-side fetching. Let's master server-side data fetching in Next.js!

Why Fetch Data on the Server?

✅ Server-Side Fetching Benefits

Faster initial load - no client-side request waterfall
SEO-friendly - content in initial HTML
Direct database access - no API routes needed
Secure - API keys stay on server
Simpler code - no loading/error state management
Better performance - server is closer to data source

❌ Old Client-Side Approach

TYPESCRIPT

'use client';
import { useState, useEffect } from 'react';

function BlogPosts() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('/api/posts')
      .then(r => r.json())
      .then(setPosts)
      .catch(setError)
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error!</div>;
  
  return <div>{posts.map(...)}</div>;
}

// ❌ Complex, slow, not SEO-friendly

The Server Component Way

TYPESCRIPT

// ✅ Simple, fast, SEO-friendly
async function BlogPosts() {
  const posts = await fetch('https://api.example.com/posts')
    .then(r => r.json());
  
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

// ✅ No useState, useEffect, loading states
// ✅ Data ready on first render
// ✅ SEO-friendly

Basic Data Fetching

Simple GET Request

app/posts/page.tsx

// Server Component (default)
interface Post {
  id: number;
  title: string;
  body: string;
}

async function PostsPage() {
  // Fetch data directly in component
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts: Post[] = await response.json();

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-8">Blog Posts</h1>
      
      <div className="space-y-6">
        {posts.map(post => (
          <article key={post.id} className="border rounded-lg p-6">
            <h2 className="text-2xl font-semibold mb-2">{post.title}</h2>
            <p className="text-gray-700">{post.body}</p>
          </article>
        ))}
      </div>
    </div>
  );
}

export default PostsPage;

// ✅ Async function - just works!
// ✅ Await directly in component
// ✅ TypeScript types for safety
// ✅ Data rendered on server

With Error Handling

app/posts/page.tsx

interface Post {
  id: number;
  title: string;
  body: string;
}

async function PostsPage() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    
    // Check if request was successful
    if (!response.ok) {
      throw new Error(`Failed to fetch posts: ${response.status}`);
    }
    
    const posts: Post[] = await response.json();

    return (
      <div className="container mx-auto px-4 py-8">
        <h1 className="text-3xl font-bold mb-8">Blog Posts</h1>
        
        <div className="space-y-6">
          {posts.map(post => (
            <article key={post.id} className="border rounded-lg p-6">
              <h2 className="text-2xl font-semibold mb-2">{post.title}</h2>
              <p className="text-gray-700">{post.body}</p>
            </article>
          ))}
        </div>
      </div>
    );
  } catch (error) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="bg-red-50 border border-red-200 rounded-lg p-6">
          <h2 className="text-xl font-bold text-red-800 mb-2">
            Failed to Load Posts
          </h2>
          <p className="text-red-600">
            {error instanceof Error ? error.message : 'Unknown error occurred'}
          </p>
        </div>
      </div>
    );
  }
}

export default PostsPage;

// ✅ Handles errors gracefully
// ✅ Shows user-friendly error message
// ✅ Checks response status

Fetching with Dynamic Parameters

Using Route Parameters

app/posts/[id]/page.tsx

interface Post {
  id: number;
  title: string;
  body: string;
  userId: number;
}

interface User {
  id: number;
  name: string;
  email: string;
}

async function PostPage({ 
  params 
}: { 
  params: { id: string } 
}) {
  // Fetch post using route parameter
  const postResponse = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.id}`
  );
  const post: Post = await postResponse.json();

  // Fetch author information
  const userResponse = await fetch(
    `https://jsonplaceholder.typicode.com/users/${post.userId}`
  );
  const user: User = await userResponse.json();

  return (
    <article className="container mx-auto px-4 py-8">
      <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
      
      <div className="text-gray-600 mb-6">
        By {user.name} ({user.email})
      </div>
      
      <div className="prose prose-lg">
        <p>{post.body}</p>
      </div>
    </article>
  );
}

export default PostPage;

// ✅ Uses route parameters
// ✅ Fetches related data
// ✅ TypeScript types ensure safety

Using Search Parameters

app/search/page.tsx

interface SearchResult {
  id: number;
  title: string;
  description: string;
}

async function SearchPage({ 
  searchParams 
}: { 
  searchParams: { q?: string; category?: string } 
}) {
  const query = searchParams.q || '';
  const category = searchParams.category || 'all';

  // Build query string
  const queryString = new URLSearchParams({
    q: query,
    category: category,
  }).toString();

  // Fetch search results
  const response = await fetch(
    `https://api.example.com/search?${queryString}`
  );
  const results: SearchResult[] = await response.json();

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-2">Search Results</h1>
      <p className="text-gray-600 mb-8">
        Searching for "{query}" in {category}
      </p>

      {results.length === 0 ? (
        <div className="text-center py-12">
          <p className="text-xl text-gray-600">No results found</p>
        </div>
      ) : (
        <div className="space-y-4">
          {results.map(result => (
            <div key={result.id} className="border rounded-lg p-4">
              <h2 className="text-xl font-semibold mb-2">{result.title}</h2>
              <p className="text-gray-700">{result.description}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default SearchPage;

// ✅ Uses search parameters
// ✅ Handles empty results
// ✅ Builds query string properly

Extracting Reusable Fetch Functions

Creating a Data Layer

lib/api.ts

// Define types
export interface Post {
  id: number;
  title: string;
  body: string;
  userId: number;
}

export interface User {
  id: number;
  name: string;
  email: string;
  username: string;
}

export interface Comment {
  id: number;
  postId: number;
  name: string;
  email: string;
  body: string;
}

// Base URL
const API_URL = 'https://jsonplaceholder.typicode.com';

// Reusable fetch function with error handling
async function fetchAPI<T>(endpoint: string): Promise<T> {
  const response = await fetch(`${API_URL}${endpoint}`, {
    next: { revalidate: 3600 }, // Cache for 1 hour
  });

  if (!response.ok) {
    throw new Error(`API request failed: ${response.status}`);
  }

  return response.json();
}

// Specific fetch functions
export async function getPosts(): Promise<Post[]> {
  return fetchAPI<Post[]>('/posts');
}

export async function getPost(id: string): Promise<Post> {
  return fetchAPI<Post>(`/posts/${id}`);
}

export async function getUser(id: number): Promise<User> {
  return fetchAPI<User>(`/users/${id}`);
}

export async function getPostComments(postId: string): Promise<Comment[]> {
  return fetchAPI<Comment[]>(`/posts/${postId}/comments`);
}

export async function getUserPosts(userId: number): Promise<Post[]> {
  return fetchAPI<Post[]>(`/users/${userId}/posts`);
}

// ✅ Centralized API logic
// ✅ Type-safe functions
// ✅ Reusable across components
// ✅ Consistent error handling
// ✅ Consistent caching strategy

Using the Data Layer

app/posts/[id]/page.tsx

import { getPost, getUser, getPostComments } from '@/lib/api';

async function PostPage({ 
  params 
}: { 
  params: { id: string } 
}) {
  // Use reusable fetch functions
  const post = await getPost(params.id);
  const user = await getUser(post.userId);
  const comments = await getPostComments(params.id);

  return (
    <article className="container mx-auto px-4 py-8">
      <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
      
      <div className="flex items-center gap-3 mb-6">
        <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">
          {user.name.charAt(0)}
        </div>
        <div>
          <p className="font-semibold">{user.name}</p>
          <p className="text-sm text-gray-600">{user.email}</p>
        </div>
      </div>
      
      <div className="prose prose-lg mb-8">
        <p>{post.body}</p>
      </div>

      <div className="border-t pt-8">
        <h2 className="text-2xl font-bold mb-4">
          Comments ({comments.length})
        </h2>
        
        <div className="space-y-4">
          {comments.map(comment => (
            <div key={comment.id} className="bg-gray-50 rounded-lg p-4">
              <div className="font-semibold mb-1">{comment.name}</div>
              <div className="text-sm text-gray-600 mb-2">{comment.email}</div>
              <p className="text-gray-700">{comment.body}</p>
            </div>
          ))}
        </div>
      </div>
    </article>
  );
}

export default PostPage;

// ✅ Clean component code
// ✅ Reusable fetch functions
// ✅ Easy to test and maintain
// ✅ Type-safe throughout

Fetching from Different Sources

REST API

TYPESCRIPT

async function ProductsPage() {
  const response = await fetch('https://api.example.com/products', {
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.API_KEY}`, // Server-side only
    },
  });
  
  const products = await response.json();
  
  return <ProductGrid products={products} />;
}

// ✅ API keys stay secure on server

Database (with ORM)

TYPESCRIPT

import { prisma } from '@/lib/prisma';

async function UsersPage() {
  // Direct database query
  const users = await prisma.user.findMany({
    include: {
      posts: true,
      profile: true,
    },
    orderBy: {
      createdAt: 'desc',
    },
  });

  return (
    <div>
      {users.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

// ✅ No API route needed
// ✅ Direct database access
// ✅ Type-safe with Prisma

GraphQL API

TYPESCRIPT

async function PostsPage() {
  const query = `
    query GetPosts {
      posts {
        id
        title
        author {
          name
          avatar
        }
      }
    }
  `;

  const response = await fetch('https://api.example.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ query }),
  });

  const { data } = await response.json();
  
  return (
    <div>
      {data.posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  );
}

// ✅ GraphQL query on server
// ✅ Precise data fetching

File System

TYPESCRIPT

import fs from 'fs/promises';
import path from 'path';

async function DocsPage() {
  // Read markdown files from disk
  const docsDir = path.join(process.cwd(), 'docs');
  const files = await fs.readdir(docsDir);
  
  const docs = await Promise.all(
    files.map(async (file) => {
      const content = await fs.readFile(
        path.join(docsDir, file),
        'utf-8'
      );
      
      return {
        slug: file.replace('.md', ''),
        content,
      };
    })
  );

  return (
    <div>
      {docs.map(doc => (
        <DocCard key={doc.slug} doc={doc} />
      ))}
    </div>
  );
}

// ✅ Read files directly
// ✅ No external API needed

Data Fetching Best Practices

1. Type Safety with TypeScript

TYPESCRIPT

// ✅ GOOD: Define types
interface Post {
  id: number;
  title: string;
  body: string;
}

async function getPosts(): Promise<Post[]> {
  const response = await fetch('https://api.example.com/posts');
  return response.json();
}

// ❌ BAD: No types
async function getPosts() {
  const response = await fetch('https://api.example.com/posts');
  return response.json(); // any type
}

2. Check Response Status

TYPESCRIPT

// ✅ GOOD: Check status
async function getPosts() {
  const response = await fetch('https://api.example.com/posts');
  
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  
  return response.json();
}

// ❌ BAD: Don't check status
async function getPosts() {
  const response = await fetch('https://api.example.com/posts');
  return response.json(); // May fail silently
}

3. Handle Errors Appropriately

TYPESCRIPT

// ✅ GOOD: Try-catch for known errors
async function PostPage({ params }) {
  try {
    const post = await getPost(params.id);
    return <PostContent post={post} />;
  } catch (error) {
    return (
      <div className="error">
        <h2>Failed to load post</h2>
        <p>{error.message}</p>
      </div>
    );
  }
}

// ✅ ALSO GOOD: Let error.tsx handle it
async function PostPage({ params }) {
  // Throws if fails - error.tsx catches it
  const post = await getPost(params.id);
  return <PostContent post={post} />;
}

4. Use Environment Variables for Secrets

TYPESCRIPT

// ✅ GOOD: Use environment variables
async function getData() {
  const response = await fetch('https://api.example.com/data', {
    headers: {
      'Authorization': `Bearer ${process.env.API_SECRET}`,
    },
  });
  return response.json();
}

// ❌ BAD: Hardcoded secrets
async function getData() {
  const response = await fetch('https://api.example.com/data', {
    headers: {
      'Authorization': 'Bearer sk_live_abc123...',  // ❌ Never do this!
    },
  });
  return response.json();
}

5. Extract Reusable Functions

TYPESCRIPT

// ✅ GOOD: Reusable functions in lib/
// lib/api.ts
export async function getPost(id: string) {
  const response = await fetch(`https://api.example.com/posts/${id}`);
  if (!response.ok) throw new Error('Failed to fetch post');
  return response.json();
}

// app/posts/[id]/page.tsx
import { getPost } from '@/lib/api';

async function PostPage({ params }) {
  const post = await getPost(params.id);
  return <PostContent post={post} />;
}

// ❌ BAD: Fetch logic in component
async function PostPage({ params }) {
  const response = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await response.json();
  return <PostContent post={post} />;
}

Data Fetching Project Structure

Organized structure for data fetching with reusable functions

appImportant

Select a file or folder to see details

Common Patterns

Pattern 1: Fetch and Display

TYPESCRIPT

async function BlogPage() {
  const posts = await fetch('https://api.example.com/posts')
    .then(r => r.json());

  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

Pattern 2: Fetch with Conditional Rendering

TYPESCRIPT

async function ProductsPage({ searchParams }) {
  const products = await getProducts(searchParams);

  if (products.length === 0) {
    return (
      <div className="text-center py-12">
        <h2>No products found</h2>
        <p>Try adjusting your filters</p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-3 gap-6">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Pattern 3: Fetch with Transformation

TYPESCRIPT

async function StatsPage() {
  const rawData = await fetch('https://api.example.com/analytics')
    .then(r => r.json());

  // Transform data for display
  const stats = {
    totalUsers: rawData.users.length,
    activeUsers: rawData.users.filter(u => u.active).length,
    revenue: rawData.transactions.reduce((sum, t) => sum + t.amount, 0),
    growth: ((rawData.users.length / rawData.previousUsers.length - 1) * 100).toFixed(1),
  };

  return (
    <div className="grid grid-cols-4 gap-6">
      <StatCard title="Total Users" value={stats.totalUsers} />
      <StatCard title="Active Users" value={stats.activeUsers} />
      <StatCard title="Revenue" value={`$${stats.revenue}`} />
      <StatCard title="Growth" value={`${stats.growth}%`} />
    </div>
  );
}

Key Takeaways

Server Components can be async - use await directly
No useEffect needed - simpler than client-side fetching
Data fetches on server - faster, SEO-friendly
Direct database access - no API routes needed
Type-safe with TypeScript - define interfaces
Check response status - handle errors properly
Extract reusable functions - centralize API logic
Use environment variables - keep secrets secure

What's Next?

You've learned the fundamentals of fetching data in Server Components! But there's more to optimize. Next, we'll explore Parallel and Sequential Data Fetching—when to fetch data simultaneously for speed versus sequentially when there are dependencies.

Understanding the difference between parallel and sequential fetching is crucial for performance. You'll learn when to use Promise.all(), when to fetch sequentially, and how to optimize your data fetching strategy for the fastest possible page loads.

⚡ Performance Tip

Always fetch data as close to the data source as possible. Server Components running on the server are closer to databases and APIs, resulting in faster fetch times than client-side requests from users' browsers!

Test Your Understanding

Question 1 of 4

Where does data fetching happen in Server Components?

Why Fetch Data on the Server?

✅ Server-Side Fetching Benefits

Faster initial load - no client-side request waterfall
SEO-friendly - content in initial HTML
Direct database access - no API routes needed
Secure - API keys stay on server
Simpler code - no loading/error state management
Better performance - server is closer to data source

❌ Old Client-Side Approach

TYPESCRIPT

'use client';
import { useState, useEffect } from 'react';

function BlogPosts() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('/api/posts')
      .then(r => r.json())
      .then(setPosts)
      .catch(setError)
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error!</div>;
  
  return <div>{posts.map(...)}</div>;
}

// ❌ Complex, slow, not SEO-friendly

The Server Component Way

TYPESCRIPT

// ✅ Simple, fast, SEO-friendly
async function BlogPosts() {
  const posts = await fetch('https://api.example.com/posts')
    .then(r => r.json());
  
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

// ✅ No useState, useEffect, loading states
// ✅ Data ready on first render
// ✅ SEO-friendly

Basic Data Fetching

Simple GET Request

app/posts/page.tsx

// Server Component (default)
interface Post {
  id: number;
  title: string;
  body: string;
}

async function PostsPage() {
  // Fetch data directly in component
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts: Post[] = await response.json();

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-8">Blog Posts</h1>
      
      <div className="space-y-6">
        {posts.map(post => (
          <article key={post.id} className="border rounded-lg p-6">
            <h2 className="text-2xl font-semibold mb-2">{post.title}</h2>
            <p className="text-gray-700">{post.body}</p>
          </article>
        ))}
      </div>
    </div>
  );
}

export default PostsPage;

// ✅ Async function - just works!
// ✅ Await directly in component
// ✅ TypeScript types for safety
// ✅ Data rendered on server

With Error Handling

app/posts/page.tsx

interface Post {
  id: number;
  title: string;
  body: string;
}

async function PostsPage() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    
    // Check if request was successful
    if (!response.ok) {
      throw new Error(`Failed to fetch posts: ${response.status}`);
    }
    
    const posts: Post[] = await response.json();

    return (
      <div className="container mx-auto px-4 py-8">
        <h1 className="text-3xl font-bold mb-8">Blog Posts</h1>
        
        <div className="space-y-6">
          {posts.map(post => (
            <article key={post.id} className="border rounded-lg p-6">
              <h2 className="text-2xl font-semibold mb-2">{post.title}</h2>
              <p className="text-gray-700">{post.body}</p>
            </article>
          ))}
        </div>
      </div>
    );
  } catch (error) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="bg-red-50 border border-red-200 rounded-lg p-6">
          <h2 className="text-xl font-bold text-red-800 mb-2">
            Failed to Load Posts
          </h2>
          <p className="text-red-600">
            {error instanceof Error ? error.message : 'Unknown error occurred'}
          </p>
        </div>
      </div>
    );
  }
}

export default PostsPage;

// ✅ Handles errors gracefully
// ✅ Shows user-friendly error message
// ✅ Checks response status

Fetching with Dynamic Parameters

Using Route Parameters

app/posts/[id]/page.tsx

interface Post {
  id: number;
  title: string;
  body: string;
  userId: number;
}

interface User {
  id: number;
  name: string;
  email: string;
}

async function PostPage({ 
  params 
}: { 
  params: { id: string } 
}) {
  // Fetch post using route parameter
  const postResponse = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${params.id}`
  );
  const post: Post = await postResponse.json();

  // Fetch author information
  const userResponse = await fetch(
    `https://jsonplaceholder.typicode.com/users/${post.userId}`
  );
  const user: User = await userResponse.json();

  return (
    <article className="container mx-auto px-4 py-8">
      <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
      
      <div className="text-gray-600 mb-6">
        By {user.name} ({user.email})
      </div>
      
      <div className="prose prose-lg">
        <p>{post.body}</p>
      </div>
    </article>
  );
}

export default PostPage;

// ✅ Uses route parameters
// ✅ Fetches related data
// ✅ TypeScript types ensure safety

Using Search Parameters

app/search/page.tsx

interface SearchResult {
  id: number;
  title: string;
  description: string;
}

async function SearchPage({ 
  searchParams 
}: { 
  searchParams: { q?: string; category?: string } 
}) {
  const query = searchParams.q || '';
  const category = searchParams.category || 'all';

  // Build query string
  const queryString = new URLSearchParams({
    q: query,
    category: category,
  }).toString();

  // Fetch search results
  const response = await fetch(
    `https://api.example.com/search?${queryString}`
  );
  const results: SearchResult[] = await response.json();

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-2">Search Results</h1>
      <p className="text-gray-600 mb-8">
        Searching for "{query}" in {category}
      </p>

      {results.length === 0 ? (
        <div className="text-center py-12">
          <p className="text-xl text-gray-600">No results found</p>
        </div>
      ) : (
        <div className="space-y-4">
          {results.map(result => (
            <div key={result.id} className="border rounded-lg p-4">
              <h2 className="text-xl font-semibold mb-2">{result.title}</h2>
              <p className="text-gray-700">{result.description}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default SearchPage;

// ✅ Uses search parameters
// ✅ Handles empty results
// ✅ Builds query string properly

Extracting Reusable Fetch Functions

Creating a Data Layer

lib/api.ts

// Define types
export interface Post {
  id: number;
  title: string;
  body: string;
  userId: number;
}

export interface User {
  id: number;
  name: string;
  email: string;
  username: string;
}

export interface Comment {
  id: number;
  postId: number;
  name: string;
  email: string;
  body: string;
}

// Base URL
const API_URL = 'https://jsonplaceholder.typicode.com';

// Reusable fetch function with error handling
async function fetchAPI<T>(endpoint: string): Promise<T> {
  const response = await fetch(`${API_URL}${endpoint}`, {
    next: { revalidate: 3600 }, // Cache for 1 hour
  });

  if (!response.ok) {
    throw new Error(`API request failed: ${response.status}`);
  }

  return response.json();
}

// Specific fetch functions
export async function getPosts(): Promise<Post[]> {
  return fetchAPI<Post[]>('/posts');
}

export async function getPost(id: string): Promise<Post> {
  return fetchAPI<Post>(`/posts/${id}`);
}

export async function getUser(id: number): Promise<User> {
  return fetchAPI<User>(`/users/${id}`);
}

export async function getPostComments(postId: string): Promise<Comment[]> {
  return fetchAPI<Comment[]>(`/posts/${postId}/comments`);
}

export async function getUserPosts(userId: number): Promise<Post[]> {
  return fetchAPI<Post[]>(`/users/${userId}/posts`);
}

// ✅ Centralized API logic
// ✅ Type-safe functions
// ✅ Reusable across components
// ✅ Consistent error handling
// ✅ Consistent caching strategy

Using the Data Layer

app/posts/[id]/page.tsx

import { getPost, getUser, getPostComments } from '@/lib/api';

async function PostPage({ 
  params 
}: { 
  params: { id: string } 
}) {
  // Use reusable fetch functions
  const post = await getPost(params.id);
  const user = await getUser(post.userId);
  const comments = await getPostComments(params.id);

  return (
    <article className="container mx-auto px-4 py-8">
      <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
      
      <div className="flex items-center gap-3 mb-6">
        <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">
          {user.name.charAt(0)}
        </div>
        <div>
          <p className="font-semibold">{user.name}</p>
          <p className="text-sm text-gray-600">{user.email}</p>
        </div>
      </div>
      
      <div className="prose prose-lg mb-8">
        <p>{post.body}</p>
      </div>

      <div className="border-t pt-8">
        <h2 className="text-2xl font-bold mb-4">
          Comments ({comments.length})
        </h2>
        
        <div className="space-y-4">
          {comments.map(comment => (
            <div key={comment.id} className="bg-gray-50 rounded-lg p-4">
              <div className="font-semibold mb-1">{comment.name}</div>
              <div className="text-sm text-gray-600 mb-2">{comment.email}</div>
              <p className="text-gray-700">{comment.body}</p>
            </div>
          ))}
        </div>
      </div>
    </article>
  );
}

export default PostPage;

// ✅ Clean component code
// ✅ Reusable fetch functions
// ✅ Easy to test and maintain
// ✅ Type-safe throughout

Fetching from Different Sources

REST API

TYPESCRIPT

async function ProductsPage() {
  const response = await fetch('https://api.example.com/products', {
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.API_KEY}`, // Server-side only
    },
  });
  
  const products = await response.json();
  
  return <ProductGrid products={products} />;
}

// ✅ API keys stay secure on server

Database (with ORM)

TYPESCRIPT

import { prisma } from '@/lib/prisma';

async function UsersPage() {
  // Direct database query
  const users = await prisma.user.findMany({
    include: {
      posts: true,
      profile: true,
    },
    orderBy: {
      createdAt: 'desc',
    },
  });

  return (
    <div>
      {users.map(user => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

// ✅ No API route needed
// ✅ Direct database access
// ✅ Type-safe with Prisma

GraphQL API

TYPESCRIPT

async function PostsPage() {
  const query = `
    query GetPosts {
      posts {
        id
        title
        author {
          name
          avatar
        }
      }
    }
  `;

  const response = await fetch('https://api.example.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ query }),
  });

  const { data } = await response.json();
  
  return (
    <div>
      {data.posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  );
}

// ✅ GraphQL query on server
// ✅ Precise data fetching

File System

TYPESCRIPT

import fs from 'fs/promises';
import path from 'path';

async function DocsPage() {
  // Read markdown files from disk
  const docsDir = path.join(process.cwd(), 'docs');
  const files = await fs.readdir(docsDir);
  
  const docs = await Promise.all(
    files.map(async (file) => {
      const content = await fs.readFile(
        path.join(docsDir, file),
        'utf-8'
      );
      
      return {
        slug: file.replace('.md', ''),
        content,
      };
    })
  );

  return (
    <div>
      {docs.map(doc => (
        <DocCard key={doc.slug} doc={doc} />
      ))}
    </div>
  );
}

// ✅ Read files directly
// ✅ No external API needed

Data Fetching Best Practices

1. Type Safety with TypeScript

TYPESCRIPT

// ✅ GOOD: Define types
interface Post {
  id: number;
  title: string;
  body: string;
}

async function getPosts(): Promise<Post[]> {
  const response = await fetch('https://api.example.com/posts');
  return response.json();
}

// ❌ BAD: No types
async function getPosts() {
  const response = await fetch('https://api.example.com/posts');
  return response.json(); // any type
}

2. Check Response Status

TYPESCRIPT

// ✅ GOOD: Check status
async function getPosts() {
  const response = await fetch('https://api.example.com/posts');
  
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  
  return response.json();
}

// ❌ BAD: Don't check status
async function getPosts() {
  const response = await fetch('https://api.example.com/posts');
  return response.json(); // May fail silently
}

3. Handle Errors Appropriately

TYPESCRIPT

// ✅ GOOD: Try-catch for known errors
async function PostPage({ params }) {
  try {
    const post = await getPost(params.id);
    return <PostContent post={post} />;
  } catch (error) {
    return (
      <div className="error">
        <h2>Failed to load post</h2>
        <p>{error.message}</p>
      </div>
    );
  }
}

// ✅ ALSO GOOD: Let error.tsx handle it
async function PostPage({ params }) {
  // Throws if fails - error.tsx catches it
  const post = await getPost(params.id);
  return <PostContent post={post} />;
}

4. Use Environment Variables for Secrets

TYPESCRIPT

// ✅ GOOD: Use environment variables
async function getData() {
  const response = await fetch('https://api.example.com/data', {
    headers: {
      'Authorization': `Bearer ${process.env.API_SECRET}`,
    },
  });
  return response.json();
}

// ❌ BAD: Hardcoded secrets
async function getData() {
  const response = await fetch('https://api.example.com/data', {
    headers: {
      'Authorization': 'Bearer sk_live_abc123...',  // ❌ Never do this!
    },
  });
  return response.json();
}

5. Extract Reusable Functions

TYPESCRIPT

// ✅ GOOD: Reusable functions in lib/
// lib/api.ts
export async function getPost(id: string) {
  const response = await fetch(`https://api.example.com/posts/${id}`);
  if (!response.ok) throw new Error('Failed to fetch post');
  return response.json();
}

// app/posts/[id]/page.tsx
import { getPost } from '@/lib/api';

async function PostPage({ params }) {
  const post = await getPost(params.id);
  return <PostContent post={post} />;
}

// ❌ BAD: Fetch logic in component
async function PostPage({ params }) {
  const response = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await response.json();
  return <PostContent post={post} />;
}

Data Fetching Project Structure

Organized structure for data fetching with reusable functions

appImportant

Select a file or folder to see details

Common Patterns

Pattern 1: Fetch and Display

TYPESCRIPT

async function BlogPage() {
  const posts = await fetch('https://api.example.com/posts')
    .then(r => r.json());

  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </div>
  );
}

Pattern 2: Fetch with Conditional Rendering

TYPESCRIPT

async function ProductsPage({ searchParams }) {
  const products = await getProducts(searchParams);

  if (products.length === 0) {
    return (
      <div className="text-center py-12">
        <h2>No products found</h2>
        <p>Try adjusting your filters</p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-3 gap-6">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Pattern 3: Fetch with Transformation

TYPESCRIPT

async function StatsPage() {
  const rawData = await fetch('https://api.example.com/analytics')
    .then(r => r.json());

  // Transform data for display
  const stats = {
    totalUsers: rawData.users.length,
    activeUsers: rawData.users.filter(u => u.active).length,
    revenue: rawData.transactions.reduce((sum, t) => sum + t.amount, 0),
    growth: ((rawData.users.length / rawData.previousUsers.length - 1) * 100).toFixed(1),
  };

  return (
    <div className="grid grid-cols-4 gap-6">
      <StatCard title="Total Users" value={stats.totalUsers} />
      <StatCard title="Active Users" value={stats.activeUsers} />
      <StatCard title="Revenue" value={`$${stats.revenue}`} />
      <StatCard title="Growth" value={`${stats.growth}%`} />
    </div>
  );
}

Key Takeaways

Server Components can be async - use await directly
No useEffect needed - simpler than client-side fetching
Data fetches on server - faster, SEO-friendly
Direct database access - no API routes needed
Type-safe with TypeScript - define interfaces
Check response status - handle errors properly
Extract reusable functions - centralize API logic
Use environment variables - keep secrets secure

Fetching Data in Server Components

Why Fetch Data on the Server?

✅ Server-Side Fetching Benefits

❌ Old Client-Side Approach

The Server Component Way

Basic Data Fetching

Simple GET Request

With Error Handling

Fetching with Dynamic Parameters

Using Route Parameters

Using Search Parameters

Extracting Reusable Fetch Functions

Creating a Data Layer

Using the Data Layer

Fetching from Different Sources

REST API

Database (with ORM)

GraphQL API

File System

Data Fetching Best Practices

1. Type Safety with TypeScript

2. Check Response Status

3. Handle Errors Appropriately

4. Use Environment Variables for Secrets

5. Extract Reusable Functions

Data Fetching Project Structure

Common Patterns

Pattern 1: Fetch and Display

Pattern 2: Fetch with Conditional Rendering

Pattern 3: Fetch with Transformation

Key Takeaways

What's Next?

Test Your Understanding

Where does data fetching happen in Server Components?

Master data fetching in Next.js Server Components! Learn async/await patterns and best practices.

Master Next.js Data Fetching

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

NextJS Tutorials

Fetching Data in Server Components

Why Fetch Data on the Server?

✅ Server-Side Fetching Benefits

❌ Old Client-Side Approach

The Server Component Way

Basic Data Fetching

Simple GET Request

With Error Handling

Fetching with Dynamic Parameters

Using Route Parameters

Using Search Parameters

Extracting Reusable Fetch Functions

Creating a Data Layer

Using the Data Layer

Fetching from Different Sources

REST API

Database (with ORM)

GraphQL API

File System

Data Fetching Best Practices

1. Type Safety with TypeScript

2. Check Response Status

3. Handle Errors Appropriately

4. Use Environment Variables for Secrets

5. Extract Reusable Functions

Data Fetching Project Structure

Common Patterns

Pattern 1: Fetch and Display

Pattern 2: Fetch with Conditional Rendering

Pattern 3: Fetch with Transformation

Key Takeaways

What's Next?

Test Your Understanding

Where does data fetching happen in Server Components?

Master data fetching in Next.js Server Components! Learn async/await patterns and best practices.

Master Next.js Data Fetching

You might also like