typescriptintermediate

Parallel Data Fetching in Server Components

Fetch multiple data sources in parallel using Promise.all in Next.js server components for faster page loads.

typescript
// app/dashboard/page.tsx
async function getUser() {
  const res = await fetch('https://api.example.com/user', {
    next: { revalidate: 60 },
  });
  return res.json();
}

async function getStats() {
  const res = await fetch('https://api.example.com/stats', {
    next: { revalidate: 300 },
  });
  return res.json();
}

async function getNotifications() {
  const res = await fetch('https://api.example.com/notifications', {
    cache: 'no-store',
  });
  return res.json();
}

export default async function DashboardPage() {
  const [user, stats, notifications] = await Promise.all([
    getUser(),
    getStats(),
    getNotifications(),
  ]);

  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <StatsGrid stats={stats} />
      <NotificationList items={notifications} />
    </div>
  );
}

Use Cases

  • dashboard pages
  • data-heavy layouts
  • performance optimization

Tags

Related Snippets

Similar patterns you can reuse in the same workflow.