NextJS 14 App Router下服务端渲染组件间数据共享方案咨询

核心结论 #

完全不需要依赖Redux等第三方状态管理库，NextJS 14 App Router结合React自身特性就能完美解决这个需求，而且更贴合框架设计理念，实现更轻量。

具体实现方案 #

方案1：状态提升（最基础、轻量） #

适合表格数据更新逻辑简单，无需额外服务端请求的场景：

• 给需要交互的按钮组件和表格组件添加'use client'指令，标记为客户端组件（服务器组件无法处理点击事件）。
• 在两个组件的共同父组件（建议用一个客户端组件作为容器，比如DashboardContainer）中定义状态，管理表格数据：

'use client';

import { useState } from 'react';
import ButtonComponent from './ButtonComponent';
import TableComponent from './TableComponent';

// 初始数据可由上层服务器组件传递（实现SSR首屏渲染）
export default function DashboardContainer({ initialTableData }: { initialTableData: TableData[] }) {
  const [tableData, setTableData] = useState(initialTableData);

  // 定义更新表格数据的回调，传给按钮组件
  const handleTableUpdate = (newData: TableData[]) => {
    setTableData(newData);
  };

  return (
    <div>
      <ButtonComponent onUpdate={handleTableUpdate} />
      <TableComponent data={tableData} />
    </div>
  );
}

• 按钮组件通过props接收handleTableUpdate，点击时触发数据更新：

'use client';

export default function ButtonComponent({ onUpdate }: { onUpdate: (data: TableData[]) => void }) {
  const handleClick = () => {
    // 这里可以是生成新数据、过滤现有数据等逻辑
    const newData = /* 处理后的数据 */;
    onUpdate(newData);
  };

  return <button onClick={handleClick}>更新表格</button>;
}

• 表格组件根据传入的data props渲染内容即可。

方案2：Server Actions（适合需要服务端数据请求的场景） #

如果点击按钮后需要从数据库/后端接口获取新数据，用Server Actions更高效，无需额外写API路由：

1. 定义Server Action（放在服务器组件或单独文件，添加'use server'）：

'use server';

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

// 接收参数，返回更新后的表格数据
export async function getUpdatedTableData(filter?: string) {
  const data = await db.table.findMany({
    where: { /* 过滤条件 */ }
  });
  return data;
}

2. 客户端组件中调用该Action并更新状态：

'use client';

import { useState } from 'react';
import { getUpdatedTableData } from '@/actions/tableActions';
import ButtonComponent from './ButtonComponent';
import TableComponent from './TableComponent';

export default function DashboardContainer({ initialTableData }: { initialTableData: TableData[] }) {
  const [tableData, setTableData] = useState(initialTableData);

  const handleUpdate = async () => {
    const newData = await getUpdatedTableData('some-filter');
    setTableData(newData);
  };

  return (
    <div>
      <ButtonComponent onClick={handleUpdate} />
      <TableComponent data={tableData} />
    </div>
  );
}

3. 按钮组件直接绑定点击事件即可。

为什么不用Redux？ #

Redux这类库主打全局状态管理，适合跨页面、跨组件层级的复杂状态共享。而你的场景是单一页面内的两个组件通信，用React内置的状态提升或NextJS的Server Actions完全能覆盖，引入Redux只会增加不必要的复杂度和代码量。

关键注意事项 #

• 所有涉及交互（点击、状态更新）的组件必须添加'use client'，服务器组件无法处理客户端交互逻辑。
• 首屏的表格初始数据要在服务器组件中获取（比如页面根组件），然后传递给客户端容器组件，保证SSR的首屏渲染效果。
• Server Actions在NextJS 14中默认启用，无需额外配置（若使用旧版本，需在next.config.js中开启experimental.serverActions: true）。

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