// 服务端组件：直接访问数据库，无需 API Layer
// app/posts/page.server.tsx
async function PostsPage() {
    // 直接调用数据库，无 HTTP 开销
    const posts = await db.query('SELECT * FROM posts ORDER BY created_at DESC LIMIT 20');
    
    return (
        <div className="posts-grid">
            {posts.map(post => (
                {/* PostCard 仍为 Server Component */}
                <PostCard key={post.id} post={post} />
            ))}
        </div>
    );
}

// Client Component：负责交互逻辑
// components/interactive-search.client.tsx
'use client';
import { useState } from 'react';

export function InteractiveSearch({ allPosts }) {
    const [query, setQuery] = useState('');
    // 客户端过滤，数据已经在 props 中传递过来
    const filtered = allPosts.filter(p => p.title.includes(query));
    
    return (
        <div>
            <input onChange={e => setQuery(e.target.value)} />
            {filtered.map(p => <PostCard key={p.id} post={p} />)}
        </div>
    );
}

// ✅ 正确：Composition Pattern（组合模式）
// Server Component 持有 Client Component 作为 children prop
async function DashboardPage() {
    const data = await fetchDashboardData(); // 服务端获取数据
    
    return (
        <Layout>
            {/* Chart 是 Client Component，数据通过 props 传入 */}
            <Chart data={data.chartSeries} />
        </Layout>
    );
}

// ❌ 错误：Client Component 内部 import Server Component
'use client';
import { ServerComponent } from './server-component'; // 运行时错误！

// ✅ 正确：通过 children prop 传递 Server Component
function ClientWrapper({ children }) {
    const [state, setState] = useState(0);
    return <div onClick={() => setState(s => s+1)}>{children}</div>;
}

// 使用：Server Component 作为 children 传入 Client Component
<ClientWrapper>
    <ServerComponent />  {/* 这是合法的 composition */}
</ClientWrapper>

// RSC Wire Protocol 示例（简化格式）
// 服务端返回的 RSC Payload 看起来类似：
// 0:DServerFragment,["$","div",null,{"className":"posts-grid"}]
// J0:["$","article",null,{"id":"1","title":"..."}]
// 1:DServerFragment,["$","div",null,{"children":[null]}]

// Client Reference 标记（不会被服务端解析）
// ["$","Chart",null,{"data":{"$undefined":null}}]

// Next.js App Router 中的实际调用
// request.toRSCStream() → ReadableStream<Uint8Array>

// 服务端实现
export async function GET(request: Request) {
    const tree = await renderToStream(<App />);
    // Content-Type: text/rsc
    return new Response(tree, {
        headers: { 'Content-Type': 'text/rsc' }
    });
}

// Next.js App Router 流式渲染示例
// app/products/page.tsx
import { Suspense } from 'react';
import { defer } from '@remix-run/node';

async function ProductsPage({ searchParams }) {
    // 关键数据：同步获取，影响 FCP
    const categories = await getCategories();

    // 非关键数据：defer 推迟，服务端渲染不阻塞
    const productsPromise = getProducts({ 
        category: searchParams.category 
    });

    return (
        <div>
            <CategorySidebar categories={categories} />
            {/* ProductGrid 使用 defer 后的 Promise */}
            <Suspense fallback={<ProductSkeleton />}>
                <ProductGrid productsPromise={productsPromise} />
            </Suspense>
        </div>
    );
}

// ProductGrid 消费 Deferred 数据
// 使用 use() hook（React 19+）或 await inside component
async function ProductGrid({ productsPromise }) {
    // 直接 await 不阻塞：React 会等待数据后继续渲染
    const products = await productsPromise;
    return products.map(p => <ProductCard key={p.id} product={p} />);
}

// Next.js 缓存控制策略

// 1. Data Cache: fetch 级别缓存控制
const data = await fetch('https://api.example.com/products', {
    // next.revalidate: 增量再生成间隔（秒）
    next: { revalidate: 3600 }  // 1小时后重新生成
});

// 2. Route Segment 级别缓存配置
// app/products/layout.tsx
export const revalidate = 60;  // 整段路由每60秒重新验证

// 3. 缓存标签：按 tag 失效特定数据源
// 写入时打标签
await fetch('https://api.example.com/products', {
    next: { tags: ['products', 'catalog'] }
});

// 触发失效
// revalidateTag('products')  // Vercel 或 Next.js 缓存 API

// 4. 动态路由：force-dynamic 强制实时渲染
export const dynamic = 'force-dynamic';
// 不使用缓存，每次请求实时渲染（SSR-like 行为）