Next.js 13 App目录中客户端组件嵌套服务端组件实现问询

原代码的核心问题 #

1. 同一文件导出两个默认组件，属于语法错误，组件必须拆分到独立文件。
2. 客户端组件未标记'use client'指令，Next.js App Router中默认所有组件都是服务端组件，若你的ClientComponent需要包含客户端交互逻辑（如状态、事件监听），必须显式声明。
3. 客户端组件无法直接渲染异步服务端组件——异步服务端组件的await逻辑仅能在服务端执行，客户端环境无法处理这类异步渲染逻辑。

正确实现方案 #

我们利用Next.js App Router的组件边界规则：服务端组件可以渲染异步服务端组件，然后将渲染结果传递给客户端组件作为子元素或props。

步骤1：拆分组件文件

1.1 客户端组件 components/ClientComponent.tsx

'use client';

export default function ClientComponent({ children }) {
  // 这里编写客户端专属逻辑：比如状态管理、点击事件、表单交互等
  return (
    <div className="client-wrapper">
      {children}
    </div>
  );
}

1.2 异步服务端组件 components/ServerComponent.tsx

// 模拟异步数据请求函数
async function getProductsData(prop: string) {
  const res = await fetch(`https://api.example.com/products?filter=${prop}`, {
    next: { revalidate: 3600 } // 可选：添加数据缓存策略
  });
  if (!res.ok) throw new Error('Failed to fetch products');
  return res.json();
}

export default async function ServerComponent({ prop }: { prop: string }) {
  const proData = await getProductsData(prop);
  
  return (
    <div className="product-group">
      {proData.map((product: any) => (
        <img
          key={product.id}
          src={product.img_src}
          height={30}
          width={30}
          alt={product.name}
        />
      ))}
    </div>
  );
}

步骤2：编写 app/page.tsx（服务端组件，默认无需标记）

import ClientComponent from '@/components/ClientComponent';
import ServerComponent from '@/components/ServerComponent';

// 页面级数据请求：获取需要传递给ServerComponent的参数列表
async function getPageData() {
  const res = await fetch('https://api.example.com/data-list');
  if (!res.ok) throw new Error('Failed to fetch page data');
  return res.json();
}

export default async function Page() {
  const data = await getPageData();

  return (
    <ClientComponent>
      {data.map((item: any) => (
        <div key={item.id} className="list-item">
          {/* 服务端组件在page.tsx中异步渲染，结果作为children传给客户端组件 */}
          <ServerComponent prop={item} />
        </div>
      ))}
    </ClientComponent>
  );
}

另一种可选方案：预渲染服务端组件后传递给客户端 #

如果客户端组件需要自主控制列表的渲染逻辑（比如过滤、排序），可以在page.tsx中预渲染所有服务端组件，再将结果作为props传递：

修改 app/page.tsx

import ClientComponent from '@/components/ClientComponent';
import ServerComponent from '@/components/ServerComponent';

async function getPageData() {
  const res = await fetch('https://api.example.com/data-list');
  if (!res.ok) throw new Error('Failed to fetch page data');
  return res.json();
}

export default async function Page() {
  const data = await getPageData();
  
  // 预渲染所有ServerComponent，将结果存入数组
  const renderedServerComponents = await Promise.all(
    data.map(async (item: any) => (
      <ServerComponent key={item.id} prop={item} />
    ))
  );

  return <ClientComponent items={renderedServerComponents} />;
}

修改 components/ClientComponent.tsx

'use client';

import { useState } from 'react';

export default function ClientComponent({ items }) {
  const [showItems, setShowItems] = useState(items);

  // 客户端示例逻辑：过滤显示内容
  const handleFilter = () => {
    setShowItems(items.slice(0, 5));
  };

  return (
    <div className="client-wrapper">
      <button onClick={handleFilter}>只显示前5项</button>
      <div className="items-container">{showItems}</div>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Muhsin Ummer