Next.js App Router 页面组织：让 page 只做装配

// app/products/page.tsx — 400+ 行
'use client' // ← 因为用了 useState，整个页面变成 Client Component
 
import { useState } from 'react'
 
export default function ProductsPage() {
  const [category, setCategory] = useState('all')
  const [products, setProducts] = useState([])
  const [page, setPage] = useState(1)
  const [loading, setLoading] = useState(false)
 
  // 数据获取逻辑直接写在页面里
  useEffect(() => {
    setLoading(true)
    fetch(`/api/products?category=${category}&page=${page}`)
      .then(res => res.json())
      .then(data => setProducts(data))
      .finally(() => setLoading(false))
  }, [category, page])
 
  // 筛选逻辑
  const categories = ['all', 'electronics', 'books', 'clothing']
 
  // 所有 UI 都在一个函数里
  return (
    <div>
      <div className="flex gap-2">
        {categories.map(c => (
          <button
            key={c}
            onClick={() => setCategory(c)}
            className={category === c ? 'bg-blue-500' : ''}
          >
            {c}
          </button>
        ))}
      </div>
      {loading ? (
        <div>加载中...</div>
      ) : products.length === 0 ? (
        <div>暂无商品</div>
      ) : (
        <div className="grid grid-cols-3 gap-4">
          {products.map(p => (
            <div key={p.id} className="border p-4 rounded">
              <h3>{p.name}</h3>
              <p>¥{p.price}</p>
            </div>
          ))}
        </div>
      )}
      <div className="flex justify-between mt-4">
        <button onClick={() => setPage(p => p - 1)} disabled={page === 1}>
          上一页
        </button>
        <span>第 {page} 页</span>
        <button onClick={() => setPage(p => p + 1)}>下一页</button>
      </div>
    </div>
  )
}

// app/products/page.tsx — 约 50 行，纯 Server Component
import { getProducts, getCategories } from './_lib/data'
import { ProductList } from './_components/product-list'
import { FilterBar } from './_components/filter-bar'
import { Pagination } from './_components/pagination'
 
// page 接收路由参数，调用数据获取，组合子组件
export default async function ProductsPage({
  searchParams,
}: {
  searchParams: Promise<{ category?: string; page?: string }>
}) {
  const params = await searchParams
  const category = params.category ?? 'all'
  const currentPage = Number(params.page ?? 1)
 
  // 服务端数据获取
  const [products, categories] = await Promise.all([
    getProducts({ category, page: currentPage }),
    getCategories(),
  ])
 
  return (
    <div>
      {/* 客户端组件，标记了 'use client'，处理交互 */}
      <FilterBar categories={categories} current={category} />
      <ProductList products={products} />
      <Pagination currentPage={currentPage} />
    </div>
  )
}

// app/products/_components/filter-bar.tsx
'use client'
 
import { useRouter, useSearchParams } from 'next/navigation'
 
export function FilterBar({
  categories,
  current,
}: {
  categories: string[]
  current: string
}) {
  const router = useRouter()
  const searchParams = useSearchParams()
 
  const handleSelect = (category: string) => {
    const params = new URLSearchParams(searchParams)
    params.set('category', category)
    params.set('page', '1')
    router.push(`?${params.toString()}`)
  }
 
  return (
    <div className="flex gap-2">
      {categories.map(c => (
        <button
          key={c}
          onClick={() => handleSelect(c)}
          className={current === c ? 'bg-blue-500 text-white' : 'bg-gray-100'}
        >
          {c}
        </button>
      ))}
    </div>
  )
}

// app/dashboard/layout.tsx
import { getUser } from '@/lib/auth'
import { getUserPreferences, getUserNotifications } from '@/lib/data'
 
export default async function DashboardLayout({ children }) {
  const user = await getUser()
  // 所有数据在 layout 层获取，透传给子级
  const preferences = await getUserPreferences(user.id)
  const notifications = await getUserNotifications(user.id)
 
  return (
    <div className="flex">
      <Sidebar user={user} preferences={preferences} />
      <main>
        <TopBar notifications={notifications} />
        {children}
      </main>
    </div>
  )
}

// app/dashboard/layout.tsx — layout 只管结构和用户鉴权
import { getUser } from '@/lib/auth'
 
export default async function DashboardLayout({ children }) {
  const user = await getUser()
 
  return (
    <div className="flex">
      <Sidebar userId={user.id} />
      <main>{children}</main>
    </div>
  )
}

// app/dashboard/_components/sidebar.tsx — 独立的数据获取
import { getUserPreferences } from '@/lib/data'
 
export async function Sidebar({ userId }: { userId: string }) {
  // 组件内部自己获取需要的数据
  const preferences = await getUserPreferences(userId)
 
  return (
    <nav>
      {/* 用 Suspense 处理加载状态 */}
      <SidebarContent preferences={preferences} />
    </nav>
  )
}

// app/dashboard/_components/top-bar.tsx
import { getUserNotifications } from '@/lib/data'
 
export async function TopBar({ userId }: { userId: string }) {
  const notifications = await getUserNotifications(userId)
  return <header>{/* 通知渲染 */}</header>
}

// app/dashboard/page.tsx — 所有面板的数据都在这获取
export default async function DashboardPage() {
  // 串行获取三个面板的数据
  const analytics = await getAnalytics()
  const recentOrders = await getRecentOrders()
  const notifications = await getNotifications()
 
  return (
    <div className="grid grid-cols-3">
      <AnalyticsPanel data={analytics} />
      <OrdersPanel data={recentOrders} />
      <NotificationsPanel data={notifications} />
    </div>
  )
}

// app/dashboard/layout.tsx — 组合 slot
import { Suspense } from 'react'
 
export default function DashboardLayout({
  children,
  analytics,
  notifications,
}: {
  children: React.ReactNode
  analytics: React.ReactNode
  notifications: React.ReactNode
}) {
  return (
    <div className="grid grid-cols-3 gap-4">
      {/* 每个 slot 独立 Suspense，互不阻塞 */}
      <Suspense fallback={<div className="animate-pulse h-48 bg-gray-100" />}>
        {analytics}
      </Suspense>
      <div>{children}</div>
      <Suspense fallback={<div className="animate-pulse h-48 bg-gray-100" />}>
        {notifications}
      </Suspense>
    </div>
  )
}

// app/dashboard/page.tsx — 只负责自己的内容
import { getRecentOrders } from './_lib/data'
import { OrdersPanel } from './_components/orders-panel'
 
export default async function DashboardPage() {
  const orders = await getRecentOrders()
  return <OrdersPanel orders={orders} />
}

// app/dashboard/@analytics/page.tsx — 独立获取分析数据
import { getAnalytics } from './_lib/data'
import { AnalyticsPanel } from './_components/analytics-panel'
 
export default async function AnalyticsSlot() {
  const data = await getAnalytics()
  return <AnalyticsPanel data={data} />
}

// page.tsx — 保持为 Server Component
import { ClientInput } from './_components/client-input'
import { getData } from './_lib/data'
 
export default async function Page() {
  const data = await getData() // 服务端获取
  return (
    <div>
      <h1>{data.title}</h1>
      <ClientInput initialData={data} /> {/* 客户端组件 */}
    </div>
  )
}

// _components/client-input.tsx
'use client'
 
import { useState } from 'react'
 
export function ClientInput({ initialData }) {
  const [value, setValue] = useState(initialData.value)
  // ... 交互逻辑
}

// app/dashboard/page.tsx — 每个区域独立 Suspense
import { Suspense } from 'react'
import { StatsCard } from './_components/stats-card'
import { RecentActivity } from './_components/recent-activity'
import { Chart } from './_components/chart'
 
export default function DashboardPage() {
  return (
    <div className="grid gap-4">
      {/* 每个区域独立加载，谁先返回谁先渲染 */}
      <Suspense fallback={<div className="h-32 animate-pulse bg-gray-100" />}>
        <StatsCard />
      </Suspense>
      <Suspense fallback={<div className="h-64 animate-pulse bg-gray-100" />}>
        <Chart />
      </Suspense>
      <Suspense fallback={<div className="h-48 animate-pulse bg-gray-100" />}>
        <RecentActivity />
      </Suspense>
    </div>
  )
}