Why this lesson matters

Understand server data fetching and use it correctly in an App Router project. Server data fetching and caching decide when data is read, reused and refreshed. Freshness is a product requirement, not a default that should be guessed.

How to reason about it

  • For Server Data Fetching, the outcome to verify is: Choose a freshness policy intentionally instead of assuming every data source needs the same behavior.
  • In Server Data Fetching, keep this failure controlled: Caching mutable user-specific data without understanding scope can serve stale or inappropriate results; disabling every cache can waste capacity.
  • Server Data Fetching practice target: Fetch one server-side resource, document its freshness requirement, then choose and test an appropriate revalidation behavior.
Diagram

Server data flow

Practical walkthrough

In the Server Data Fetching walkthrough: Choose a freshness policy intentionally instead of assuming every data source needs the same behavior.

app/posts/page.tsxtsx
export default async function PostsPage() {
  const response = await fetch('https://example.com/api/posts');
  if (!response.ok) throw new Error('Failed to load posts');
  const posts = await response.json();
  return <PostList posts={posts} />;
}

Practice it yourself

Practice

Server Data Fetching exercise

Fetch one server-side resource, document its freshness requirement, then choose and test an appropriate revalidation behavior.

  • Record the expected result before execution
  • Test one valid path and one lesson-specific failure path
  • Explain in two lines which boundary owns the decision

Summary