数据获取：取数下沉到组件树

'use client'
import { useEffect, useState } from 'react'

function ProductPage({ id }: { id: string }) {
  const [product, setProduct] = useState<Product | null>(null)

  useEffect(() => {
    // 代价 1：要先开一个 /api/products/[id] 端点给浏览器调
    // 代价 2：渲染发生在数据之前——这一拍只能渲染空态
    fetch(`/api/products/${id}`).then(r => r.json()).then(setProduct)
  }, [id])

  if (!product) return <Skeleton />            // 先白屏 / 骨架
  return <h1>{product.name}</h1>                // 数据回来才有内容
}

// 取数被抽到页面级的特殊导出函数里，和组件分离
export async function getServerSideProps(
  ctx: { params: { id: string } }
) {
  const product = await db.product.find(ctx.params.id)
  return { props: { product } }               // 数据从页面顶层一路 props 往下传
}

export default function ProductPage(
  { product }: { product: Product }
) {
  return <h1>{product.name}</h1>                // 组件自己不取数，只收 props
}

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

// 没有 'use client'，是 Server Component；async 渲染函数能直接 await
export default async function ProductPage(
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params
  const product = await db.product.find(id)    // 取数就在组件里，无中转端点
  return <h1>{product.name}</h1>                // 渲染出的就是带数据的结果
}

export default async function Dashboard() {
  // user 和 stats 互相独立，却被串成了瀑布
  const user = await getUser()       // 200ms，先等它
  const stats = await getStats()     // 再等 200ms —— 它本不必等 user

  return <Header user={user} stats={stats} />
  // 总耗时 ≈ 200 + 200 = 400ms
}

export default async function Dashboard() {
  // 先一起发起（不 await），再一起等 —— 两个请求同时在途
  const [user, stats] = await Promise.all([
    getUser(),                       // 200ms ┐
    getStats(),                      // 200ms ┘ 并发
  ])

  return <Header user={user} stats={stats} />
  // 总耗时 ≈ max(200, 200) = 200ms
}

// lib/get-user.ts —— 直连数据库，fetch 拦不到，用 React.cache 包裹
import { cache } from 'react'
import { db } from '@/lib/db'

export const getUser = cache(async () => {
  return db.user.current()           // 同一次渲染内，相同入参只真正执行一次
})

// app/layout.tsx —— 第 1 次调用：真正查库
export default async function Layout({ children }) {
  const user = await getUser()
  return <><Avatar src={user.avatar} />{children}</>
}

// app/page.tsx —— 第 2 次调用：命中记忆化，不再查库
export default async function Page() {
  const user = await getUser()       // 同一次渲染，返回上面那次的结果
  return <h1>欢迎，{user.name}</h1>
}

import { Suspense } from 'react'

// 慢查询被隔进独立 async 组件——它自己 await，不在页面顶层
async function SlowAnalytics() {
  const data = await getAnalytics()       // 2s 的重聚合报表
  return <Report data={data} />
}

export default async function Dashboard() {
  // 顶层只 await 快数据，且并行
  const [user, menu] = await Promise.all([getUser(), getMenu()])

  return (
    <main>
      <Header user={user} />                {/* 快：立即渲染 */}
      <Sidebar items={menu} />             {/* 快：立即渲染 */}

      <Suspense fallback={<ReportSkeleton />}>
        <SlowAnalytics />                  {/* 慢：先出骨架，2s 后流式补上 */}
      </Suspense>
    </main>
  )
}