Next.js Data Fetching Patterns That Outlived the Framework Churn

If you have built with Next.js for more than a year, you have migrated data fetching APIs. getStaticProps, getServerSideProps, then the App Router, then React Server Components. The churn is real. But three patterns held across every migration and I still reach for them.

Pattern 1: Fetch at the Leaf, Not the Root

The temptation is to fetch all data at the page level and pass it down as props. Do not do this. Fetch at the component that needs the data. With React Server Components this is trivial: any server component can be async and fetch its own data.

The benefit is composition. Components become self-contained. Moving a component to another page does not require moving a fetch call. The page becomes a layout, not a data orchestrator.

// Instead of this
export default async function Page() {
  const user = await getUser();
  const posts = await getPosts();
  const sidebar = await getSidebar();
  return <Layout user={user} posts={posts} sidebar={sidebar} />;
}
 
// Do this
export default function Page() {
  return (
    <Layout>
      <UserBadge />    {/* fetches its own data */}
      <Posts />         {/* fetches its own data */}
      <Sidebar />       {/* fetches its own data */}
    &lt;/Layout>
  );
}

Pattern 2: Cache at the Fetch Layer, Not the Route

Next.js route caching is powerful but coarse. Fetch-level caching via React's cache function gives you per-query control. Wrap your data functions once and every component that calls them gets the same result within a request.

Pattern 3: Streaming Beats Loading

Suspense boundaries with React Server Components let you stream content as it is ready. A slow sidebar query no longer delays the main content. The user sees the post body instantly, the sidebar fills in afterwards.

This pattern is the biggest UX win I have gotten from framework features. Users perceive the site as fast because the content they care about arrives first. See the Next.js streaming docs for the setup.

The meta-lesson: frameworks change, architecture survives. Design for the lasting patterns, not the syntax of the moment.