Next.js 14：客户端组件存数据后跳转服务器组件如何更新数据

你遇到的核心问题是：服务器组件运行在服务端，无法直接读取客户端本地存储的数据，单纯的router.push或提前router.refresh都没法让服务器组件获取到你在客户端存的数据。下面是几种可行的解决方案：

方案1：通过URL查询参数传递数据 #

把需要传递给服务器组件的数据编码后放到URL的查询参数里，服务器组件通过searchParams读取并处理：

客户端组件代码： #

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

export default function ClientComponent() {
  const router = useRouter();
  const updateDataAndNavigate = () => {
    // 你要传递的更新数据
    const updateData = { status: 'active', page: 1 };
    // 编码避免特殊字符问题
    const encodedData = encodeURIComponent(JSON.stringify(updateData));
    // 跳转到服务器组件页面并携带参数
    router.push(`/server-component?data=${encodedData}`);
  };

  return <button onClick={updateDataAndNavigate}>跳转到列表页</button>;
}

服务器组件代码： #

export default async function ServerComponent({ searchParams }) {
  let updateData = null;
  if (searchParams.data) {
    // 解码获取数据
    updateData = JSON.parse(decodeURIComponent(searchParams.data));
  }

  // 根据updateData获取或更新列表数据
  const listData = await fetchListData(updateData);

  return (
    <div>
      <h1>数据列表</h1>
      {/* 渲染列表 */}
    </div>
  );
}

async function fetchListData(filter) {
  // 这里根据filter参数从数据库/API获取对应数据
  const res = await fetch(`https://api.example.com/list?filter=${JSON.stringify(filter)}`, {
    next: { revalidate: 0 } // 确保每次都获取最新数据
  });
  return res.json();
}

方案2：先提交数据到服务器，再跳转 #

如果你的数据需要持久化（比如更新数据库），先通过API路由把客户端的数据提交到服务器，再跳转到服务器组件页面，此时服务器组件就能直接从数据库获取最新数据：

客户端组件代码： #

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

export default function ClientComponent() {
  const router = useRouter();
  const submitDataAndNavigate = async () => {
    // 要更新的数据
    const newData = { name: '新数据', value: 123 };
    
    // 调用API路由提交数据到服务器
    await fetch('/api/update-data', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(newData)
    });

    // 提交完成后跳转到服务器组件页面
    router.push('/server-component');
  };

  return <button onClick={submitDataAndNavigate}>更新并跳转</button>;
}

API路由（app/api/update-data/route.js）： #

export async function POST(request) {
  const data = await request.json();
  // 这里执行数据库更新操作
  await db.collection('items').insertOne(data);
  return Response.json({ success: true });
}

服务器组件代码： #

export default async function ServerComponent() {
  // 直接从数据库获取最新数据
  const listData = await db.collection('items').find().toArray();
  return (
    <div>
      <h1>最新数据列表</h1>
      {/* 渲染列表 */}
    </div>
  );
}

方案3：使用服务器端会话存储（如Session/Redis） #

如果数据不需要放到URL里（比如敏感数据），可以把数据存到服务器端的会话或缓存中，再让服务器组件读取：

客户端组件代码： #

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

export default function ClientComponent() {
  const router = useRouter();
  const saveDataToSession = async () => {
    const sessionData = { userId: '123', preferences: { theme: 'dark' } };
    // 调用API存储到服务器会话
    await fetch('/api/save-session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(sessionData)
    });
    router.push('/server-component');
  };

  return <button onClick={saveDataToSession}>保存会话并跳转</button>;
}

服务器组件代码： #

import { getServerSession } from 'next-auth/next';
import authOptions from '@/app/api/auth/[...nextauth]/authOptions';

export default async function ServerComponent() {
  // 从会话中获取数据
  const session = await getServerSession(authOptions);
  const userPreferences = session?.user?.preferences;

  // 根据会话数据获取对应列表
  const listData = await fetchListByPreferences(userPreferences);
  return <div>{/* 渲染列表 */}</div>;
}

关键注意点： #

• 不要依赖客户端存储（如localStorage、sessionStorage）给服务器组件传数据，服务器端无法访问这些内容。
• router.refresh()是刷新当前页面的服务器组件，在跳转前调用对目标页面的服务器组件没有作用。
• 如果使用URL参数，记得对数据进行编码/解码，避免特殊字符导致的解析错误。

内容的提问来源于stack exchange，提问作者Kumar Shaikat Bala