Next.js › Layouts & Templates

How do you fetch and share data across a layout and all of its nested pages efficiently?

Advanced

Answer

You fetch shared data, such as the current user's profile, directly inside the layout component itself since layouts can also be async server components, and pass that data down to nested pages as needed, while relying on Next.js request deduplication to avoid fetching the same data twice if a nested page needs it too.

export default async function DashboardLayout({ children }) {
  const user = await getCurrentUser();
  return (
    <div>
      <Header user={user} />
      {children}
    </div>
  );
}

Real-world example A dashboard layout fetches the current logged in user once and displays their name in the header, while individual dashboard pages can independently fetch that same user data again without triggering an extra database query thanks to deduplication.

Common follow-ups: Can a layout pass fetched data directly as props to its children?;How do you handle loading states for data fetched inside a layout?

Data Fetching;Loading UI & Streaming with Suspense