Next.js 15 Architecture and Data Fetching Best Practices

Dec 16, 2024

Next.js

Suspense

Intro

Next.js 15 introduces powerful patterns for data fetching, component architecture, and performance optimization. Let's explore how to leverage these features effectively.

Key concepts we'll cover:

Component-level Suspense boundaries with outer/inner pattern
Request deduping and optimized data fetching
Colocating data with consuming components
Handling async page parameters
Progressive loading and granular loading states
Server vs Client components
Prop passing strategies

Previous Approaches and Their Problems

Let's look at what we want to avoid:

old-approach.tsx

export const PlpWrapper = async () => {
  const vehicles = await fetchVehicles();
  const aggregations = await fetchAggregations(vehicles);

  return (
    <div>
      <Suspense fallback={<LoadingSkeleton />}>
        <VehicleList vehicles={vehicles} /> {/* Blocked by aggregations */}
        <Filters aggregations={aggregations} />
      </Suspense>
    </div>
  );
};