React Server Components Data Fetching: Parallel Requests, Deduplication, and Streaming

React Server Components changed how we think about data fetching. Instead of fetching in useEffect (client) or getServerSideProps (page-level), each component fetches exactly what it needs — closer to the component that renders it, without prop drilling, and with zero client-side JavaScript for the data layer.

But RSC data fetching has sharp edges: accidental waterfalls, cross-request data leaks, and misuse of cache() are all easy to introduce. This guide covers the patterns that keep RSC data fetching fast and safe.

The Mental Model

In RSC, think of each component as an async function that runs on the server:

// This is valid in a Server Component
async function UserProfile({ userId }: { userId: string }) {
  const user = await getUser(userId); // Runs on server, not sent to client
  return <h1>{user.name}</h1>;
}

No useEffect. No loading state in the component. No API route needed. The component is the API route.

The Waterfall Problem

The most common RSC mistake — sequential awaits when fetches are independent:

// ❌ WRONG: Sequential waterfall — 300ms total (100 + 100 + 100)
async function Dashboard({ userId }: { userId: string }) {
  const user     = await getUser(userId);       // 100ms
  const projects = await getProjects(userId);   // 100ms (waits for user)
  const stats    = await getStats(userId);      // 100ms (waits for projects)

  return <>{/* render */}</>;
}

// ✅ CORRECT: Parallel — 100ms total (all start simultaneously)
async function Dashboard({ userId }: { userId: string }) {
  const [user, projects, stats] = await Promise.all([
    getUser(userId),
    getProjects(userId),
    getStats(userId),
  ]);

  return <>{/* render */}</>;
}

Use await only when data from one fetch is required to start the next. Everything else: Promise.all.

Request Deduplication with React cache()

When the same data is needed by multiple components in a tree, React.cache() deduplicates per-request:

// lib/data/user.ts
import { cache } from "react";
import { prisma } from "@/lib/prisma";
import { auth } from "@/auth";

// Wrapped with cache() — called 10 times in a request tree, only hits DB once
export const getUser = cache(async (userId: string) => {
  return prisma.user.findUnique({
    where: { id: userId },
    include: {
      organization: { select: { id: true, name: true, plan: true } },
    },
  });
});

export const getCurrentUser = cache(async () => {
  const session = await auth();
  if (!session?.user?.id) return null;
  return getUser(session.user.id);
});

// Multiple components can call getCurrentUser() without extra DB hits
// app/dashboard/page.tsx
async function DashboardPage() {
  const user = await getCurrentUser(); // DB hit #1
  if (!user) redirect("/auth/signin");

  return (
    <div>
      <DashboardNav />     {/* calls getCurrentUser() → deduplicated, no extra hit */}
      <DashboardContent /> {/* calls getCurrentUser() → deduplicated, no extra hit */}
    </div>
  );
}

// components/dashboard-nav.tsx
async function DashboardNav() {
  const user = await getCurrentUser(); // Deduplicated — same request
  return <nav>Hello, {user?.name}</nav>;
}

Important: React.cache() scope is per-request. Never share cached values across requests — this would leak user A's data to user B.

Streaming with Suspense

Streaming lets the page shell render immediately while slow data loads asynchronously:

// app/dashboard/page.tsx
import { Suspense } from "react";
import { DashboardShell } from "@/components/dashboard/shell";
import { ProjectsList } from "@/components/projects/list";
import { ActivityFeed } from "@/components/activity/feed";
import { StatCards } from "@/components/stats/cards";
import { ProjectsListSkeleton, ActivitySkeleton, StatsSkeleton } from "@/components/skeletons";

export default function DashboardPage() {
  // Note: no async — the page itself renders immediately
  return (
    <DashboardShell>
      {/* Fast: stat cards load in parallel with other sections */}
      <Suspense fallback={<StatsSkeleton />}>
        <StatCards />
      </Suspense>

      <div className="grid grid-cols-3 gap-6">
        {/* Slow: project list with complex query */}
        <div className="col-span-2">
          <Suspense fallback={<ProjectsListSkeleton />}>
            <ProjectsList />
          </Suspense>
        </div>

        {/* Also slow but independent — loads in parallel */}
        <div>
          <Suspense fallback={<ActivitySkeleton />}>
            <ActivityFeed />
          </Suspense>
        </div>
      </div>
    </DashboardShell>
  );
}

// components/stats/cards.tsx — Server Component, awaits its own data
async function StatCards() {
  // This component streams in once this fetch completes
  const stats = await getWorkspaceStats();

  return (
    <div className="grid grid-cols-4 gap-4">
      <StatCard label="Projects" value={stats.projects} />
      <StatCard label="Tasks" value={stats.tasks} />
      <StatCard label="Members" value={stats.members} />
      <StatCard label="This month" value={stats.tasksThisMonth} />
    </div>
  );
}

Preloading: Start Fetches Before Rendering

For known data needs, start the fetch before the component tree renders using the preload pattern:

// lib/data/project.ts
import { cache } from "react";
import { prisma } from "@/lib/prisma";

export const getProject = cache(async (projectId: string) => {
  return prisma.project.findUnique({
    where: { id: projectId },
    include: {
      members: { include: { user: { select: { id: true, name: true, avatarUrl: true } } } },
      tasks: { where: { status: { not: "done" } }, orderBy: { createdAt: "desc" }, take: 10 },
    },
  });
});

// Preload: kick off fetch before rendering, result cached by React cache()
export function preloadProject(projectId: string): void {
  void getProject(projectId); // Intentionally not awaited
}

// app/projects/[id]/page.tsx
import { preloadProject, getProject } from "@/lib/data/project";
import { ProjectHeader } from "@/components/project/header";
import { Suspense } from "react";

export default async function ProjectPage({
  params,
}: {
  params: { id: string };
}) {
  // Start fetch immediately — before any child renders
  preloadProject(params.id);

  return (
    <div>
      {/* ProjectHeader will call getProject() which is already in-flight */}
      <Suspense fallback={<div>Loading...</div>}>
        <ProjectHeader projectId={params.id} />
      </Suspense>
    </div>
  );
}

// components/project/header.tsx
async function ProjectHeader({ projectId }: { projectId: string }) {
  // getProject() was already started by preloadProject() — minimal wait
  const project = await getProject(projectId);
  if (!project) notFound();
  return <h1>{project.name}</h1>;
}

Composing Fetches Across Component Tree

// Complex page: each section fetches its own data, all in parallel via Suspense
// app/workspace/[workspaceId]/page.tsx

export default async function WorkspacePage({
  params,
}: {
  params: { workspaceId: string };
}) {
  // Verify access (fast — needed synchronously)
  const session = await auth();
  const hasAccess = await verifyWorkspaceAccess(session?.user?.id, params.workspaceId);
  if (!hasAccess) notFound();

  return (
    <WorkspaceLayout workspaceId={params.workspaceId}>
      {/* All three Suspense boundaries start fetching in parallel */}
      <Suspense fallback={<HeaderSkeleton />}>
        <WorkspaceHeader workspaceId={params.workspaceId} />
      </Suspense>

      <Suspense fallback={<ProjectGridSkeleton />}>
        <ProjectGrid workspaceId={params.workspaceId} />
      </Suspense>

      <Suspense fallback={<TeamSidebarSkeleton />}>
        <TeamSidebar workspaceId={params.workspaceId} />
      </Suspense>
    </WorkspaceLayout>
  );
}

// Each fetches independently
async function WorkspaceHeader({ workspaceId }: { workspaceId: string }) {
  const workspace = await getWorkspace(workspaceId);
  return <header>{workspace.name}</header>;
}

async function ProjectGrid({ workspaceId }: { workspaceId: string }) {
  const projects = await getProjects(workspaceId);
  return <div className="grid">{projects.map((p) => <ProjectCard key={p.id} project={p} />)}</div>;
}

async function TeamSidebar({ workspaceId }: { workspaceId: string }) {
  const members = await getWorkspaceMembers(workspaceId);
  return <aside>{members.map((m) => <MemberRow key={m.id} member={m} />)}</aside>;
}

Safe Server-Side Data Access

Always validate authorization in the data layer, not just at the page level:

// lib/data/project.ts — authorization-aware fetcher

export const getProjectForUser = cache(
  async (projectId: string, userId: string) => {
    const project = await prisma.project.findFirst({
      where: {
        id: projectId,
        // Always check membership — never trust URL parameter alone
        OR: [
          { ownerId: userId },
          { members: { some: { userId } } },
        ],
      },
      include: {
        tasks: true,
        members: { include: { user: true } },
      },
    });

    return project; // null if not authorized
  }
);

// In page:
async function ProjectPage({ params }: { params: { id: string } }) {
  const session = await auth();
  const project = await getProjectForUser(params.id, session!.user.id);
  if (!project) notFound(); // 404 — doesn't reveal existence to unauthorized users
  return <ProjectView project={project} />;
}

unstable_cache for Cross-Request Caching

React.cache() deduplicates within a single request. unstable_cache (Next.js) caches across requests with tags:

// lib/data/public-stats.ts
import { unstable_cache } from "next/cache";
import { prisma } from "@/lib/prisma";

// Cache public stats for 5 minutes across all requests
export const getPublicStats = unstable_cache(
  async () => {
    const [userCount, projectCount] = await Promise.all([
      prisma.user.count(),
      prisma.project.count({ where: { isPublic: true } }),
    ]);
    return { userCount, projectCount };
  },
  ["public-stats"],
  { revalidate: 300, tags: ["public-stats"] }
);

// ⚠️ Never use unstable_cache for user-specific data
// It's shared across ALL users — data leaks are serious
// ✅ For user-specific data: scope the cache key with userId
export const getUserDashboardStats = (userId: string) =>
  unstable_cache(
    async () => {
      return prisma.project.count({ where: { ownerId: userId } });
    },
    [`user-stats-${userId}`],         // Unique key per user
    { revalidate: 60, tags: [`user-stats-${userId}`] }
  )();

Error Handling in Server Components

// app/projects/[id]/error.tsx — Error boundary for RSC failures
"use client";

import { useEffect } from "react";
import { Button } from "@/components/ui/button";

export default function ProjectError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Log to error tracking
    console.error("Project page error:", error);
  }, [error]);

  return (
    <div className="flex flex-col items-center justify-center min-h-[400px] gap-4">
      <h2 className="text-lg font-semibold">Something went wrong</h2>
      <p className="text-sm text-gray-500">{error.message}</p>
      <Button onClick={reset}>Try again</Button>
    </div>
  );
}

Data Fetching Decision Tree

Does the data change per user?
  Yes → Use React.cache() with userId in query (never unstable_cache without scoping)
  No  → Use unstable_cache with revalidate tag

Do multiple components need the same data?
  Yes → Wrap fetcher in React.cache()
  No  → Direct async call

Is the data needed before the page shell renders?
  Yes → Await at page level, pass as prop
  No  → Suspense boundary around the component

Are multiple independent fetches needed?
  Yes → Promise.all (never sequential await)
  No  → Single await

Cost and Timeline Estimates

See Also

• Next.js App Router Caching Strategies
• Next.js Server Components Patterns
• React Server Actions and Form Handling
• Next.js Performance Optimization
• React Query for Server State Management

---

Working With Viprasol

RSC data fetching looks simple until you audit a production app and find 15 sequential awaits that should be parallel, cache() called without request scoping, and Suspense boundaries placed in the wrong spots. Our team builds RSC data layers that are fast, secure, and don't accidentally share data between users.

What we deliver:

• Parallel fetch architecture with Promise.all throughout
• React cache() wrappers for deduplication with userId scoping
• Suspense boundary placement for streaming
• unstable_cache for public/shared data with revalidation tags
• Authorization checks in the data layer (not just page-level)

Talk to our team about your Next.js data fetching architecture →

Or explore our web development services.