Parallel Routes in Next.js 16 — Two @slots Rendering the Same Data Doubled Server Load

// ============================================
// default.js must exist at EVERY @slot level
// ============================================

// app/@modal/default.tsx — matches when no modal page at root level
export default function ModalDefault() {
  return null
}

// app/@modal/feed/default.tsx — matches when in /feed/* with no modal
export default function FeedModalDefault() {
  return null
}

// app/@modal/feed/(.)photo/[id]/page.tsx — intercepts /photo/:id
// from /feed to show in modal
export default async function PhotoModal({
  params
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  const photo = await fetch(`https://api.example.com/photos/${id}`)
    .then(r => r.json())

  return (
    <div className="modal-backdrop">
      <div className="modal-content">
        <img src={photo.url} alt={photo.title} />
        <Link href="/feed">Close</Link>
      </div>
    </div>
  )
}

// Without default.tsx at both levels:
// /feed → modal slot missing page → collapses (no default.js)
// /feed/photo/123 → modal matches intercept → works
// Navigating from /feed/photo/123 to /feed → modal collapses entirely

// ============================================
// Intercepting route with direct-access fallback
// ============================================

// app/feed/(.)photo/[id]/page.tsx
// Only renders when navigated from /feed via client-side Link

export default async function InterceptedPhotoModal({
  params
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  const photo = await fetch(`https://api.example.com/photos/${id}`)
    .then(r => r.json())

  return (
    <div className="modal-backdrop">
      <div className="modal-content">
        <img src={photo.url} alt={photo.title} />
        <p>{photo.description}</p>
        <Link href="/feed" className="close-btn">Close</Link>
      </div>
    </div>
  )
}

// app/photo/[id]/page.tsx
// Full page render for direct access, refresh, and new tab

export default async function PhotoPage({
  params
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  const photo = await fetch(`https://api.example.com/photos/${id}`)
    .then(r => r.json())

  return (
    <div className="photo-page">
      <img src={photo.url} alt={photo.title} />
      <h1>{photo.title}</h1>
      <p>{photo.description}</p>
      <Link href="/feed">Back to gallery</Link>
    </div>
  )
}

// Option: force modal via searchParams in the regular page
// app/photo/[id]/page.tsx with modal flag
export default async function PhotoPage({
  params,
  searchParams
}: {
  params: Promise<{ id: string }>
  searchParams: Promise<{ modal?: string }>
}) {
  const { id } = await params
  const { modal } = await searchParams

  if (modal === 'true') {
    const { default: Modal } = await import('./modal')
    return <Modal params={Promise.resolve({ id })} />
  }

  // ... full page render
}

// app/layout.tsx
// Orchestrate sidebar and main content as independent navigable slots

export default function AppLayout({
  children,
  sidebar
}: {
  children: React.ReactNode
  sidebar: React.ReactNode
}) {
  return (
    <div className="flex h-screen">
      <nav className="w-64 border-r overflow-y-auto">
        {sidebar}
      </nav>
      <main className="flex-1 overflow-y-auto">
        {children}
      </main>
    </div>
  )
}

// app/@sidebar/page.tsx
// Default sidebar — shown when no specific sidebar route matches
import { SidebarNav } from '@/components/SidebarNav'

export default function SidebarDefault() {
  return <SidebarNav />
}

// app/@sidebar/users/page.tsx
// Users-specific sidebar — shown when URL is /users/*
import { UserNav } from '@/components/UserNav'

export default function UsersSidebar() {
  return <UserNav />
}

// app/@sidebar/settings/page.tsx
// Settings sidebar — shown when URL is /settings/*
import { SettingsNav } from '@/components/SettingsNav'

export default function SettingsSidebar() {
  return <SettingsNav />
}

// app/@sidebar/default.tsx
// Fallback when sidebar has no match
import { SidebarNav } from '@/components/SidebarNav'

export default function SidebarFallback() {
  return <SidebarNav />
}

// ============================================
// Intercepting Route Patterns — Quick Reference
// ============================================

// File System Structure:
// app/
//   feed/
//     page.tsx                       -> /feed
//     (.)photo/
//       [id]/
//         page.tsx                   -> intercepts /feed/photo/:id from /feed
//     category/
//       page.tsx                     -> /feed/category
//       (..)(..)settings/
//         page.tsx                   -> intercepts /settings from /feed/category
//   photo/
//     [id]/
//       page.tsx                     -> /photo/:id (full page)
//   settings/
//     page.tsx                       -> /settings (full page)

// Navigation scenarios:
// <Link href="/photo/123"> from /feed
//   -> intercepts: YES (via (.) at /feed/(.)photo/[id])
//   -> renders: modal over /feed
//
// Direct URL: /photo/123
//   -> intercepts: NO
//   -> renders: full page at /photo/[id]/page.tsx
//
// <Link href="/settings"> from /feed/category
//   -> intercepts: YES (via (..)(..) at /feed/category/(..)(..)settings)
//   -> renders: modal over /feed/category
//
// <Link href="/photo/123"> from anywhere (root)
//   -> intercepts: NO (unless (...) pattern exists)
//   -> renders: full page at /photo/[id]/page.tsx

// ============================================
// Shared data fetching across parallel slots
// ============================================

// lib/data.ts — shared data utility
import { cache } from 'react'

export const getCurrentUser = cache(async () => {
  const res = await fetch('https://api.example.com/auth/me', {
    cache: 'force-cache',
    headers: {
      // Cookie is forwarded from the request — shared across slots
      Cookie: '' // Set by middleware, accessed via headers()
    }
  })

  if (!res.ok) return null
  return res.json()
})

export const getDashboardStats = cache(async (userId: string) => {
  const res = await fetch(
    `https://api.example.com/dashboard/${userId}/stats`,
    { next: { revalidate: 60 } }
  )
  return res.json()
})

// app/@sidebar/page.tsx
import { getCurrentUser, getDashboardStats } from '@/lib/data'

export default async function SidebarSlot() {
  const user = await getCurrentUser()
  const stats = await getDashboardStats(user.id) // Uses cached result

  return <DashboardSidebar user={user} stats={stats} />
}

// app/page.tsx (main content)
import { getCurrentUser, getDashboardStats } from '@/lib/data'

export default async function DashboardPage() {
  const [user, stats] = await Promise.all([
    getCurrentUser(), // Returns cached — no fetch
    getDashboardStats(user.id) // Returns cached — no fetch
  ])

  return <DashboardMain user={user} stats={stats} />
}

// ============================================
// Profile slot rendering time
// ============================================

// app/layout.tsx with timing instrumentation

export default async function ProfiledLayout({
  children,
  sidebar,
  modal
}: {
  children: React.ReactNode
  sidebar: React.ReactNode
  modal: React.ReactNode
}) {
  // Add timing wrapper in your monitoring tool
  // Each slot's render time includes its full data fetching tree

  return (
    <div className="layout">
      <section className="sidebar">
        {/* @sidebar renders here */}
        {sidebar}
      </section>
      <section className="content">
        {/* children renders here */}
        {children}
      </section>
      <section className="modal">
        {/* @modal renders here */}
        {modal}
      </section>
    </div>
  )
}

// Alternative: check build output for route types
// Dynamic (λ) slots indicate request-time rendering for each one
// At least one slot being λ means the entire layout is dynamic