fetch() in Server Components — 47 Uncached Database Queries Per Page Loaded

// ============================================
// fetch() — auto-cached by Next.js
// ============================================

// These are automatically cached by Next.js Data Cache
// Same URL + options = one network call, repeated cache hits

async function getTodosViaFetch() {
  const res = await fetch('https://api.example.com/todos', {
    next: { revalidate: 60 } // optional: revalidate every 60s
  })
  return res.json()
}

// ============================================
// Database query — NOT cached by default
// ============================================

// Prisma: every call hits the database
// Same query called from 3 components = 3 database queries

import { prisma } from '@/lib/prisma'

async function getTodosViaPrisma() {
  // This hits the database EVERY TIME — no caching
  return await prisma.todo.findMany()
}

// ============================================
// Fix 1: React cache() — request-scoped deduplication
// ============================================

import { cache } from 'react'

// Multiple calls to getTodosCached() in the SAME render pass
// result in only ONE database query

const getTodosCached = cache(async () => {
  return await prisma.todo.findMany()
})

// ============================================
// Fix 2: unstable_cache() — persistent cross-request cache
// ============================================

import { unstable_cache } from 'next/cache'

// Cached across requests with 60s revalidation
// After 60s, the next request triggers a fresh query

const getTodosPersistent = unstable_cache(
  async () => {
    return await prisma.todo.findMany()
  },
  ['todos-list'], // cache key
  { revalidate: 60, tags: ['todos'] } // 60s TTL + cache tag
)

// ============================================
// WATERFALL — sequential independent fetches
// ============================================

// Total time: 900ms (3 × 300ms) — BAD

export default async function DashboardPage() {
  const revenue = await getRevenue() // starts at 0ms, ends at 300ms
  const pageviews = await getPageviews() // starts at 300ms, ends at 600ms
  const sessions = await getSessions() // starts at 600ms, ends at 900ms

  return (
    <div>
      <RevenueWidget data={revenue} />
      <PageviewsWidget data={pageviews} />
      <SessionsWidget data={sessions} />
    </div>
  )
}

// ============================================
// PARALLEL — Promise.all() for independent fetches
// ============================================

// Total time: 300ms (max of 3) — GOOD

export default async function DashboardPage() {
  const [revenue, pageviews, sessions] = await Promise.all([
    getRevenue(),     // starts at 0ms, ends at 300ms
    getPageviews(),   // starts at 0ms, ends at 250ms
    getSessions(),    // starts at 0ms, ends at 280ms
  ])

  return (
    <div>
      <RevenueWidget data={revenue} />
      <PageviewsWidget data={pageviews} />
      <SessionsWidget data={sessions} />
    </div>
  )
}

// ============================================
// MIXED — necessary waterfall + parallel independent
// ============================================

// Total time: user(300ms) + max(orders(200ms), recommendations(400ms)) = 700ms
// Without parallelization: 300 + 200 + 400 = 900ms

export default async function ProfilePage({ userId }: { userId: string }) {
  const user = await getUser(userId) // necessary waterfall — orders needs userId

  const [orders, recommendations] = await Promise.all([
    getOrders(user.id),              // independent after user
    getRecommendations(user.id),     // independent after user
  ])

  return (
    <div>
      <UserProfile user={user} />
      <OrderList orders={orders} />
      <Recommendations items={recommendations} />
    </div>
  )
}

// ============================================
// Without cache() — duplicate database queries
// ============================================

// lib/data.ts
import { prisma } from './prisma'

export async function getCurrentUser(userId: string) {
  console.log('DB QUERY: getCurrentUser') // Logged TWICE on the same page
  return await prisma.user.findUnique({ where: { id: userId } })
}

// layout.tsx — calls getCurrentUser
import { getCurrentUser } from '@/lib/data'

export default async function Layout({ children }) {
  const user = await getCurrentUser('123') // DB call #1
  return (
    <>
      <Header user={user} />
      <Sidebar user={user} /> {/* Sidebar calls getCurrentUser again */}
      <main>{children}</main>
    </>
  )
}

// sidebar.tsx — ALSO calls getCurrentUser (unknowingly)
import { getCurrentUser } from '@/lib/data'

export async function Sidebar({ children }) {
  const user = await getCurrentUser('123') // DB call #2 — DUPLICATE!
  return <aside>{/* ... */}</aside>
}

// ============================================
// With cache() — deduplicated within same request
// ============================================

// lib/data.ts
import { cache } from 'react'
import { prisma } from './prisma'

// Only ONE database query per render pass, no matter how many callers
export const getCurrentUser = cache(async (userId: string) => {
  console.log('DB QUERY: getCurrentUser') // Logged ONCE
  return await prisma.user.findUnique({ where: { id: userId } })
})

// Both layout.tsx and sidebar.tsx call getCurrentUser('123')
// Only the first call executes — the second awaits the same promise
// Result: 1 database query instead of 2

// ============================================
// cache() with parameters — properly keyed
// ============================================

export const getProduct = cache(async (productId: string) => {
  return await prisma.product.findUnique({ where: { id: productId } })
})

// getProduct('abc') and getProduct('xyz') are different keys — both execute
// getProduct('abc') called twice = executes once
// cache key is determined by arguments

// ============================================
// unstable_cache() — persistent caching for DB queries
// ============================================

import { unstable_cache } from 'next/cache'
import { prisma } from '@/lib/prisma'

// ---- Basic usage: cache with time-based revalidation ----

export const getProducts = unstable_cache(
  async (categoryId?: string) => {
    return await prisma.product.findMany({
      where: categoryId ? { categoryId } : undefined,
      orderBy: { createdAt: 'desc' },
      take: 100,
    })
  },
  ['products-list'], // cache key prefix
  { revalidate: 60, tags: ['products'] } // 60s TTL
)

// ---- Tag-based invalidation from Server Action ----

'use server'
import { revalidateTag } from 'next/cache'

export async function createProduct(formData: FormData) {
  const product = await prisma.product.create({
    data: {
      title: formData.get('title') as string,
      price: Number(formData.get('price')),
    },
  })

  // Invalidate ALL cache entries tagged with 'products'
  revalidateTag('products')

  return { success: true, product }
}

// ---- Usage: on-demand revalidation for specific items ----

export const getProduct = unstable_cache(
  async (slug: string) => {
    return await prisma.product.findUnique({
      where: { slug },
      include: { reviews: true },
    })
  },
  ['product-detail'],
  { tags: ['products'] } // tagged same as list — updating a product invalidates both
)

// For more specific invalidation, use unique tags per item:

export const getProductDetailed = unstable_cache(
  async (slug: string) => {
    return await prisma.product.findUnique({
      where: { slug },
      include: { reviews: true, seller: true },
    })
  },
  ['product-detail', 'slug'],
  { tags: ['products', `product-${slug}`] }
)

// Then invalidate only this product:
// revalidateTag(`product-${slug}`) — keeps other product caches intact

// ============================================
// Preloading pattern — start queries immediately
// ============================================

// --- lib/data.ts ---
import { cache } from 'react'
import { prisma } from './prisma'

export const getCurrentUser = cache(async (userId: string) => {
  return await prisma.user.findUnique({ where: { id: userId } })
})

export const getDashboardData = cache(async (userId: string) => {
  return await prisma.dashboard.findUnique({ where: { userId } })
})

// --- layout.tsx — PRELOAD data at module level ---

import { getCurrentUser, getDashboardData } from '@/lib/data'

// Start BOTH queries immediately — before any component renders
// These calls trigger the async functions but don't await yet
// The promises are stored in React's cache() for later use
const preloadUser = (id: string) => { void getCurrentUser(id) }
const preloadDashboard = (id: string) => { void getDashboardData(id) }

export default async function DashboardLayout({
  children,
  params,
}: {
  children: React.ReactNode
  params: { userId: string }
}) {
  // Preload ALL data that any child component needs
  preloadUser(params.userId)
  preloadDashboard(params.userId)

  // Layout awaits only its own needed data
  const user = await getCurrentUser(params.userId)

  // Children can also await getCurrentUser or getDashboardData
  // Since they were preloaded (and cache() deduplicates),
  // the awaits return immediately with the in-flight promise
  return (
    <div>
      <Header user={user} />
      {children}
    </div>
  )
}

// --- dashboard-page.tsx — child component ---

import { getDashboardData } from '@/lib/data'

export default async function DashboardPage({
  params,
}: {
  params: { userId: string }
}) {
  // This query was already started in the layout!
  // cache() returns the in-flight promise — no second DB call
  const data = await getDashboardData(params.userId)

  return <div>{/* render dashboard */}</div>
}

// ============================================
// Alternative: preload() function pattern
// ============================================

export const getProduct = cache(async (slug: string) => {
  return await prisma.product.findUnique({ where: { slug } })
})

// Export a preload function alongside the data function
export const preloadProduct = (slug: string) => {
  void getProduct(slug)
}

// In parent:
// preloadProduct('my-product') — starts query
// ... later ...
// const product = await getProduct('my-product') — returns immediately

// ============================================
// Route Segment Config — caching behavior per route
// ============================================

// --- app/dashboard/page.tsx ---

// Time-based revalidation: page refreshes max every 30 seconds
// First visitor triggers a fresh render
// Subsequent visitors within 30s get the cached version
export const revalidate = 30

export default async function DashboardPage() {
  const data = await getDashboardData()
  return <Dashboard data={data} />
}

// --- app/live-scores/page.tsx ---

// Fully dynamic: every request is a fresh server render
// NO caching at any level
export const dynamic = 'force-dynamic'

export default async function LiveScoresPage() {
  const scores = await getLiveScores()
  return <ScoreBoard scores={scores} />
}

// --- app/about/page.tsx ---

// Fully static: rendered at build time, served from cache
export const dynamic = 'force-static'

export default async function AboutPage() {
  const team = await getTeamData() // fetched at build time
  return <About team={team} />
}

// --- app/products/[slug]/page.tsx ---

// Mix: page is statically generated with ISR
// Revalidates the HTML every 60 seconds
export const revalidate = 60

export async function generateStaticParams() {
  const products = await prisma.product.findMany()
  return products.map((p) => ({ slug: p.slug }))
}

export default async function ProductPage({
  params,
}: {
  params: { slug: string }
}) {
  const product = await getProduct(params.slug)
  return <ProductDetail product={product} />
}

// ============================================
// Config inheritance: parent configs apply to children
// ============================================

// app/layout.tsx
export const revalidate = 3600 // 1 hour for the entire site

// app/dashboard/layout.tsx — overrides parent for dashboard section
export const revalidate = 60 // 1 minute for all dashboard routes

// app/dashboard/analytics/page.tsx — inherits 60s from dashboard layout

// ============================================
// Without Suspense — page waits for ALL data
// ============================================

// Total render time: 1200ms (max of all queries)
// User sees: blank page for 1200ms, then everything at once

export default async function DashboardPage() {
  const [revenue, pageviews, sessions] = await Promise.all([
    getRevenue(),     // 800ms
    getPageviews(),   // 600ms
    getSessions(),    // 400ms
  ])

  return (
    <div className="grid grid-cols-3 gap-4">
      <RevenueChart data={revenue} />
      <PageviewsChart data={pageviews} />
      <SessionsChart data={sessions} />
    </div>
  )
}

// ============================================
// With Suspense — streams widgets as data arrives
// ============================================

// Page shell renders: immediately
// Sessions widget streams in: at 400ms
// Pageviews widget streams in: at 600ms
// Revenue widget streams in: at 800ms
// User sees content progressively, not all at once

import { Suspense } from 'react'

export default function DashboardPage() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <Suspense fallback={<WidgetSkeleton />}>
        <RevenueWidget />
      </Suspense>
      <Suspense fallback={<WidgetSkeleton />}>
        <PageviewsWidget />
      </Suspense>
      <Suspense fallback={<WidgetSkeleton />}>
        <SessionsWidget />
      </Suspense>
    </div>
  )
}

// --- Each widget component fetches its own data ---

async function RevenueWidget() {
  const data = await getRevenue() // 800ms
  return <RevenueChart data={data} />
}

async function PageviewsWidget() {
  const data = await getPageviews() // 600ms
  return <PageviewsChart data={data} />
}

async function SessionsWidget() {
  const data = await getSessions() // 400ms
  return <SessionsChart data={data} />
}

function WidgetSkeleton() {
  return <div className="h-48 animate-pulse rounded bg-gray-200" />
}

// ============================================
// Hybrid: parallel + Suspense
// ============================================

// For widgets that share data, use Promise.all() and pass as props
// Stream the slowest widget in Suspense

export default async function DashboardPage() {
  // Start shared fetches immediately
  const revenuePromise = getRevenue()
  const sessions = await getSessions() // fast — 400ms

  return (
    <div>
      <SessionsChart data={sessions} /> {/* renders immediately */}
      <Suspense fallback={<WidgetSkeleton />}>
        <RevenueWidgetWrapper dataPromise={revenuePromise} />
      </Suspense>
    </div>
  )
}

async function RevenueWidgetWrapper({
  dataPromise,
}: {
  dataPromise: Promise<RevenueData>
}) {
  const data = await dataPromise
  return <RevenueChart data={data} />
}

// ============================================
// NECESSARY waterfall — dependency chain
// ============================================

// Query B depends on Query A — cannot parallelize
// Total time: 900ms (300 + 300 + 300)

export default async function OrderDetailPage(orderId: string) {
  const order = await getOrder(orderId)          // Q1: ~300ms
  const product = await getProduct(order.productId) // Q2: depends on Q1 — ~300ms
  const seller = await getSeller(product.sellerId)  // Q3: depends on Q2 — ~300ms

  return <OrderView order={order} product={product} seller={seller} />
}

// ============================================
// UNNECESSARY waterfall — independent queries
// ============================================

// All three queries only need userId — which is a route param, known immediately
// Total time (sequential): 900ms — BAD
// Total time (parallel): 300ms — GOOD

export default async function ProfilePage(userId: string) {
  const profile = await getProfile(userId)    // Q1: ~300ms
  const posts = await getPosts(userId)         // Q2: ~300ms — independent!
  const followers = await getFollowers(userId) // Q3: ~300ms — independent!

  return <ProfileView profile={profile} posts={posts} followers={followers} />
}

// CORRECT: parallel
export default async function ProfilePage(userId: string) {
  const [profile, posts, followers] = await Promise.all([
    getProfile(userId),
    getPosts(userId),
    getFollowers(userId),
  ])

  return <ProfileView profile={profile} posts={posts} followers={followers} />
}

// ============================================
// HIDDEN waterfall — child component fetching
// ============================================

// BAD: each child fetches independently, parent renders children sequentially

export default function BlogPage() {
  return (
    <div>
      <Header />       {/* renders first, fetches user data: 200ms */}
      <ArticleList />  {/* renders second, fetches articles: 300ms */}
      <Sidebar />      {/* renders third, fetches tags: 150ms */}
      {/* Total time: 200 + 300 + 150 = 650ms */}
    </div>
  )
}

// GOOD: parent fetches all data, passes as props

export default async function BlogPage() {
  const [user, articles, tags] = await Promise.all([
    getCurrentUser(),
    getArticles(),
    getTags(),
  ])
  // Total time: max(200, 300, 150) = 300ms

  return (
    <div>
      <Header user={user} />
      <ArticleList articles={articles} />
      <Sidebar tags={tags} />
    </div>
  )
}

// ============================================
// Auto-deduplication: same URL + options = one request
// ============================================

// These two component BOTH call fetch('/api/user')
// Next.js deduplicates — only ONE network request

// --- Header.tsx (Server Component) ---

async function Header() {
  const user = await fetch('https://api.example.com/user', {
    next: { tags: ['user'] }
  }).then(r => r.json())

  return <header>{user.name}</header>
}

// --- Sidebar.tsx (Server Component) ---

async function Sidebar() {
  const user = await fetch('https://api.example.com/user', {
    next: { tags: ['user'] }
  }).then(r => r.json())

  return <aside>{user.role}</aside>
}

// Result: one HTTP request, both components get the same data

// ============================================
// NO deduplication: different URLs or options
// ============================================

// Different URL paths → two requests
fetch('/api/user') // request 1
fetch('/api/user?nocache=true') // request 2 — different URL

// Different headers → two requests
fetch('/api/user', { headers: { 'x-custom': 'a' } }) // request 1
fetch('/api/user', { headers: { 'x-custom': 'b' } }) // request 2

// Different cache options → two requests
fetch('/api/user', { cache: 'force-cache' }) // request 1
fetch('/api/user', { cache: 'no-store' }) // request 2 — different init

// ============================================
// For database: use cache() for the same effect
// ============================================

// Without cache(): two database queries
const getUser = async (id: string) => {
  return await prisma.user.findUnique({ where: { id } })
}

// With cache(): one database query
const getUserCached = cache(async (id: string) => {
  return await prisma.user.findUnique({ where: { id } })
})

// ============================================
// Shared data function with cache() — used by parallel layouts
// ============================================

// --- lib/data.ts ---
import { cache } from 'react'
import { prisma } from './prisma'

export const getCurrentUser = cache(async () => {
  // Only ONE database query even if called from multiple parallel layouts
  return await prisma.user.findUnique({ where: { id: getUserIdFromSession() } })
})

export const getSiteConfig = cache(async () => {
  return await prisma.siteConfig.findFirst()
})

// --- app/dashboard/layout.tsx ---

import { getCurrentUser, getSiteConfig } from '@/lib/data'

export default async function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  // First call to getCurrentUser — starts the DB query
  const user = await getCurrentUser()
  const config = await getSiteConfig()

  return (
    <div className="dashboard-layout">
      <DashboardNav user={user} />
      {children}
      <footer>{config.footer}</footer>
    </div>
  )
}

// --- app/dashboard/analytics/layout.tsx (parallel child layout) ---

import { getCurrentUser } from '@/lib/data'

export default async function AnalyticsLayout({
  children,
}: {
  children: React.ReactNode
}) {
  // Second call to getCurrentUser — cache() returns the in-flight promise
  // No database query — same promise as DashboardLayout
  const user = await getCurrentUser()

  return (
    <div className="analytics-layout">
      <AnalyticsHeader user={user} />
      {children}
    </div>
  )
}

// Both layouts are rendered in parallel by Next.js
// getCurrentUser() called from both — but cache() ensures only ONE DB query
// The second layout's await resolves with the same promise as the first's

// ============================================
// Data fetching with cache tags — for event-based invalidation
// ============================================

import { unstable_cache } from 'next/cache'
import { prisma } from '@/lib/prisma'

// Fetch with tag for event-based invalidation
// Time-based fallback: 300s
export const getProducts = unstable_cache(
  async () => {
    return await prisma.product.findMany({
      orderBy: { createdAt: 'desc' },
    })
  },
  ['products-list'],
  { revalidate: 300, tags: ['products'] }
)

// ============================================
// Server Action — invalidates cache on mutation
// ============================================

'use server'

import { revalidateTag } from 'next/cache'
import { prisma } from '@/lib/prisma'

export async function updateProductPrice(
  productId: string,
  newPrice: number
) {
  // Update database
  await prisma.product.update({
    where: { id: productId },
    data: { price: newPrice },
  })

  // Invalidate ALL cache entries tagged with 'products'
  // This clears: getProducts list, getProduct detail, search results — everything
  revalidateTag('products')

  return { success: true }
}

// ============================================
// Specific invalidation — per-item tags
// ============================================

export const getProduct = unstable_cache(
  async (slug: string) => {
    return await prisma.product.findUnique({
      where: { slug },
      include: { inventory: true, reviews: true },
    })
  },
  ['product-detail', 'slug'],
  { tags: ['products', `product-${slug}`] }
)

'use server'

export async function updateProductInventory(
  slug: string,
  quantity: number
) {
  await prisma.inventory.update({
    where: { productSlug: slug },
    data: { quantity },
  })

  // Only invalidate cache for THIS product
  revalidateTag(`product-${slug}`)

  // All other product caches remain valid
  return { success: true }
}

// ============================================
// Complete Data Fetching Pattern
// ============================================

// --- lib/data.ts ---
import { cache } from 'react'
import { unstable_cache } from 'next/cache'
import { prisma } from '@/lib/prisma'

// Step 3: CACHE — wrap with cache() for request dedup + unstable_cache() for persistence
export const getDashboardData = cache(async (userId: string) => {
  const [profile, stats, recentOrders, notifications] = await Promise.all([
    // Step 2: PARALLELIZE — all independent queries run concurrently
    getProfile(userId),
    getStats(userId),
    getRecentOrders(userId),
    getNotifications(userId),
  ])

  return { profile, stats, recentOrders, notifications }
})

const getProfile = unstable_cache(
  async (userId: string) => prisma.user.findUnique({ where: { id: userId } }),
  ['profile'],
  { revalidate: 60, tags: ['user'] }
)

const getStats = unstable_cache(
  async (userId: string) => prisma.dashboard.findUnique({ where: { userId } }),
  ['stats'],
  { revalidate: 60, tags: ['dashboard'] }
)

const getRecentOrders = unstable_cache(
  async (userId: string) =>
    prisma.order.findMany({ where: { userId }, orderBy: { date: 'desc' }, take: 5 }),
  ['recent-orders'],
  { revalidate: 30, tags: ['orders'] }
)

const getNotifications = unstable_cache(
  async (userId: string) =>
    prisma.notification.findMany({ where: { userId, read: false } }),
  ['notifications'],
  { revalidate: 10, tags: ['notifications'] }
)

// --- app/dashboard/page.tsx ---

import { Suspense } from 'react'
import { getDashboardData } from '@/lib/data'

// Step 1: CONSOLIDATE — parent fetches all data
export default async function DashboardPage() {
  const userId = await getCurrentUserId()

  return (
    <div className="grid grid-cols-2 gap-6">
      {/* Step 4: STREAM — wrap in Suspense for progressive loading */}
      <Suspense fallback={<CardSkeleton />}>
        <ProfileSection userId={userId} />
      </Suspense>
      <Suspense fallback={<CardSkeleton />}>
        <StatsSection userId={userId} />
      </Suspense>
      <Suspense fallback={<TableSkeleton />}>
        <RecentOrdersSection userId={userId} />
      </Suspense>
      <Suspense fallback={<CardSkeleton />}>
        <NotificationsSection userId={userId} />
      </Suspense>
    </div>
  )
}

// Individual widget — receives userId, fetches its portion
async function ProfileSection({ userId }: { userId: string }) {
  const { profile } = await getDashboardData(userId)
  return <ProfileCard user={profile} />
}

async function StatsSection({ userId }: { userId: string }) {
  const { stats } = await getDashboardData(userId)
  return <StatsGrid data={stats} />
}