渲染：静态、动态与流式

// 仍是 Server Component（没有 'use client'）
import { cookies } from 'next/headers'

export async function Greeting() {
  // cookies() 在 16 起是 async，必须 await
  // 一旦调用它，这棵子树就无法在构建时算出 → 转为动态渲染
  const store = await cookies()
  const name = store.get('username')?.value ?? '访客'
  return <p>欢迎回来，{name}</p>   {/* 因人而异，只能请求时算 */}
}

// page 的 searchParams 也是请求时信息，16 起是 Promise
export default async function SearchPage(
  { searchParams }: { searchParams: Promise<{ q?: string }> }
) {
  const { q } = await searchParams   // 读它 → 本路由转为动态渲染
  const results = await search(q)
  return <ResultList items={results} />
}

import { Suspense } from 'react'

async function Reviews({ id }: { id: string }) {
  const reviews = await db.reviews.byProduct(id)  // 慢：假设 ~800ms
  return <ReviewList items={reviews} />
}

export default async function ProductPage(
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params
  const product = await db.product.find(id)       // 快：标题 / 价格

  return (
    <main>
      <h1>{product.name}</h1>       {/* 立即可见，不等 Reviews */}
      <Price value={product.price} />
      {/* Suspense 从外层包住慢组件；fallback 先占位 */}
      <Suspense fallback={<Skeleton />}>
        <Reviews id={id} />        {/* ready 后作为 chunk 流式补上 */}
      </Suspense>
    </main>
  )
}