Technical
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 */}
</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.
RELATED READING
The Consulting Shift I Am Making In Year Two
After a year of writing and building, my consulting practice is changing shape. Shorter engagements. Sharper outcomes.
ReadThe Frontend Shift: Shipping Less JavaScript In Year Two
A year ago I reached for Next.js for everything. This year I often reach for nothing.
ReadThe Serverless Lesson I Would Write On A Sticky Note
After a year of shipping serverless projects, one rule explains most of the wins and all of the losses.
Read