Data Fetching Fundamentals

Learn server-side data fetching patterns, caching strategies, and revalidation in Next.js 16.

25 min

3 sections

data-fetching

caching

server-components

01. Fetching in Server Components

Section 1 of 3

Server Components can directly fetch data using async/await. Data is fetched on the server and sent to the client as HTML.

typescript

// app/users/page.tsx
async function getUsers() {
  const res = await fetch('https://api.example.com/users');
  return res.json();
}

export default async function UsersPage() {
  const users = await getUsers();

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

Exercise

Fetch and Display Posts

Practice

Create a page that fetches posts from JSONPlaceholder and displays them in a list.

Loading and Error States

Server Actions

Back to Course