Next.js 13：如何向服务端组件传递依赖的menu_id参数？

针对你遇到的服务端组件无法访问客户端状态（menu_id）来获取API数据的问题，这里提供几种符合Next.js最佳实践的解决方案：

方案一：通过路由参数传递（推荐） #

利用Next.js App Router的路由参数机制，将menu_id放到URL路径中，服务端组件可以直接从路由参数中读取并触发数据获取，完全符合服务端渲染的设计逻辑。

修改后的代码： #

Child组件（客户端）：

'use client';
import { useRouter } from 'next/navigation';

export default function ChildComponent({ places }: MyPlacesTabType) {
  const router = useRouter();

  const handleClick = (menu_id: string) => {
    // 跳转到包含menu_id的路由
    router.push(`/dashboard/${menu_id}`);
  };

  return (
    <div>
      <section>
        {places.map((place) => (
          <Button key={place.id} onClick={() => handleClick(place.id)}>
            {place.name}
          </Button>
        ))}
      </section>
    </div>
  );
}

Parent组件（服务端）：

import ChildComponent from './child';

// 修正原代码中的URL错误，添加API域名并修正路径
const getMenuData = async (menu_id: string) => {
  const res = await fetch(`https://your-api-domain/${menu_id}/items`, {
    next: { revalidate: 60 } // 可选：设置缓存策略，减少重复请求
  });
  
  if (!res.ok) throw new Error('获取菜单数据失败');
  return res.json();
};

// 从路由参数中接收menuId
export default async function DashboardLayout({
  params,
}: {
  params: { menuId: string };
}) {
  // 服务端直接获取menu_id并请求数据
  const menuData = await getMenuData(params.menuId);

  return (
    <div className="flex h-screen flex-col bg-primary">
      <ChildComponent places={/* 你的places数据源 */} />
      {/* 渲染服务端获取的菜单数据 */}
      <div className="mt-4">
        {menuData.map(item => (
          <div key={item.id} className="p-2 border-b">{item.name}</div>
        ))}
      </div>
    </div>
  );
}

优势： #

• 完全遵循Next.js服务端渲染模式，数据在服务端预渲染，无需客户端额外处理
• 路由参数语义化，利于SEO和用户体验
• 服务端组件可直接获取参数，无需依赖客户端状态管理器

方案二：API Route + SWR/React Query（无需修改路由） #

如果不想改变现有路由结构，可以通过创建服务端API Route作为代理，客户端组件使用SWR或React Query根据menu_id触发请求，数据获取逻辑仍在服务端执行。

步骤1：创建API Route（服务端） #

// app/api/menu/[menuId]/route.ts
export async function GET(request: Request, { params }: { params: { menuId: string } }) {
  const { menuId } = params;
  const res = await fetch(`https://your-api-domain/${menuId}/items`);
  
  if (!res.ok) {
    return Response.json({ error: '获取数据失败' }, { status: 500 });
  }
  
  const data = await res.json();
  return Response.json(data);
}

步骤2：修改Child组件（客户端） #

'use client';
import { useState } from 'react';
import useSWR from 'swr';

// 定义请求函数
const fetcher = (url: string) => fetch(url).then(res => res.json());

export default function ChildComponent({ places }: MyPlacesTabType) {
  const [currentMenu, setCurrentMenu] = useState('venhan');
  // 根据currentMenu自动请求API Route
  const { data: menuData, error } = useSWR(`/api/menu/${currentMenu}`, fetcher);

  const handleClick = (menu_id: string) => {
    setCurrentMenu(menu_id);
  };

  if (error) return <div className="text-red-500">加载失败</div>;
  if (!menuData) return <div className="text-gray-500">加载中...</div>;

  return (
    <div>
      <section>
        {places.map((place) => (
          <Button key={place.id} onClick={() => handleClick(place.id)}>
            {place.name}
          </Button>
        ))}
      </section>
      {/* 渲染获取到的菜单数据 */}
      <div className="mt-4">
        {menuData.map(item => (
          <div key={item.id} className="p-2 border-b">{item.name}</div>
        ))}
      </div>
    </div>
  );
}

优势： #

• 无需修改路由，适合现有路由结构固定的场景
• API Route作为服务端代理，避免客户端直接暴露外部API地址
• SWR自动处理缓存、重新请求和加载状态，简化客户端逻辑

方案三：搜索参数传递（轻量场景） #

如果不需要语义化路由，可以通过URL搜索参数（?menuId=xxx）传递menu_id，服务端组件通过请求头解析参数。

修改后的代码： #

Child组件（客户端）：

'use client';
import { useRouter, useSearchParams } from 'next/navigation';

export default function ChildComponent({ places }: MyPlacesTabType) {
  const router = useRouter();
  const searchParams = useSearchParams();

  const handleClick = (menu_id: string) => {
    const params = new URLSearchParams(searchParams);
    params.set('menuId', menu_id);
    router.push(`?${params.toString()}`);
  };

  return (
    <div>
      <section>
        {places.map((place) => (
          <Button key={place.id} onClick={() => handleClick(place.id)}>
            {place.name}
          </Button>
        ))}
      </section>
    </div>
  );
}

Parent组件（服务端）：

import { headers } from 'next/headers';
import ChildComponent from './child';

const getMenuData = async (menu_id: string) => {
  const res = await fetch(`https://your-api-domain/${menu_id}/items`, {
    next: { revalidate: 60 }
  });
  
  if (!res.ok) throw new Error('获取数据失败');
  return res.json();
};

export default async function DashboardLayout() {
  const headersList = headers();
  // 从referer中解析搜索参数
  const url = new URL(headersList.get('referer') || '');
  const menuId = url.searchParams.get('menuId') || 'venhan';
  
  const menuData = await getMenuData(menuId);

  return (
    <div className="flex h-screen flex-col bg-primary">
      <ChildComponent places={/* 你的places数据源 */} />
      <div className="mt-4">
        {menuData.map(item => (
          <div key={item.id} className="p-2 border-b">{item.name}</div>
        ))}
      </div>
    </div>
  );
}

优势： #

• 无需修改路由结构，实现成本低
• 适合轻量交互场景，不需要复杂的路由配置

内容的提问来源于stack exchange，提问作者Navid Azimi