Why this lesson matters

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

Practical walkthrough

In the Caching Basics 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

Caching Basics 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