1. 无需深层传递状态的官方方案 #

在Next.js 15的App Router体系下，官方明确弃用Context/Providers，取而代之的是利用框架内置的数据缓存机制，让任意组件（包括深层嵌套组件）直接通过async/await调用数据获取函数（比如你的getUser）。

核心逻辑是：Next.js会自动缓存数据请求结果（默认force-cache策略），多个组件调用同一个数据函数时，只会发起一次实际请求，后续调用直接读取缓存，完全不存在数据不同步的问题。这就彻底避免了Props Drilling的繁琐，每个组件可以独立获取所需数据，无需从上层组件层层传递。

调整你的示例代码，无需传递user给子组件：

// app/settings/page.tsx
export default async function SettingsPage(){
   // 首次调用触发请求并缓存结果
   const user = await getUser();
   return (
      <div>
          <Widget1 /> {/* 不再需要传递user */}
          <Widget2 />
      </div>
   );
}

async function Widget1(){
   // 直接调用getUser，命中缓存，与父组件数据完全同步
   const user = await getUser();
   return <div>{user.name}</div>;
}

async function Widget2(){
   const user = await getUser();
   return <div>{user.email}</div>;
}

如果需要自定义缓存规则，可在数据函数中配置：

async function getUser() {
  // 配置60秒自动重新验证缓存
  const res = await fetch('/api/user', { next: { revalidate: 60 } });
  return res.json();
}

2. 子组件更新值后触发高层组件响应式更新 #

若要在子组件中修改数据并让上层组件同步更新，需结合客户端组件和Server Actions实现：

步骤1：定义Server Action处理更新与缓存失效 #

Server Action负责在服务器端执行数据更新操作，同时调用revalidatePath清除对应路径的缓存，触发页面重新渲染：

// app/actions.ts
'use server';

import { revalidatePath } from 'next/cache';

export async function updateUser(newUserData: User) {
  // 执行数据库更新逻辑
  await db.user.update({
    where: { id: newUserData.id },
    data: newUserData,
  });
  
  // 清除/settings路径的缓存，触发页面重新获取数据
  revalidatePath('/settings');
}

步骤2：用客户端组件处理交互 #

服务器组件无法处理用户交互（如按钮点击），因此需将负责更新的子组件标记为客户端组件（添加'use client'指令），在组件内调用Server Action并处理交互状态：

// app/settings/components/UpdateUserForm.tsx
'use client';

import { useTransition } from 'react';
import { updateUser } from '../../actions';

export default function UpdateUserForm({ user }: { user: User }) {
  const [isPending, startTransition] = useTransition();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const newUserData = {
      id: user.id,
      name: formData.get('name') as string,
      email: formData.get('email') as string,
    };

    // 调用Server Action，触发缓存失效与页面更新
    startTransition(async () => {
      await updateUser(newUserData);
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" defaultValue={user.name} disabled={isPending} />
      <input type="email" name="email" defaultValue={user.email} disabled={isPending} />
      <button type="submit" disabled={isPending}>
        {isPending ? '更新中...' : '保存修改'}
      </button>
    </form>
  );
}

步骤3：在服务器页面中引入客户端组件 #

在服务器组件的页面中，仅需将初始化用的用户数据传递给客户端组件：

// app/settings/page.tsx
import UpdateUserForm from './components/UpdateUserForm';

export default async function SettingsPage(){
   const user = await getUser();
   return (
      <div>
          <Widget1 />
          <Widget2 />
          <UpdateUserForm user={user} />
      </div>
   );
}

用户提交表单后，Server Action会更新数据库并清除缓存，Next.js会自动重新获取最新用户数据，所有调用getUser的组件都会同步更新，实现响应式通知。

内容的提问来源于stack exchange，提问作者d-_-b