Next.js中如何从服务器组件（Server Component）访问客户端组件（Client Component）的状态变量

我明白你现在的困扰——在Next.js里，客户端组件的状态要传给服务器组件确实有点绕，因为两者的运行环境完全不同：服务器组件在后端渲染，根本碰不到浏览器里的客户端状态。不过我们有几个简单可行的方案，不用把B改成客户端组件，也不用上Redux这种重型工具。

方案一：利用路由搜索参数传递（优化你之前的尝试） #

你之前尝试用Link传递参数，但错误地把B改成了客户端组件——其实在App Router里，服务器组件可以直接通过searchParams props获取URL上的参数，完全不需要客户端钩子！

修改后的代码如下：

A.tsx（客户端组件）

'use client'
import { useState } from "react"
import Link from 'next/link'

const A = () => {
  const [aValues, setAValues] = useState({
    name: '',
    phone: ''
  });

  return (
    <div>
      <div>A是客户端组件</div>
      <input
        type="text"
        value={aValues.name}
        onChange={(e) => setAValues({...aValues, name: e.target.value})}
        placeholder="输入姓名"
      />
      <input
        type="tel"
        value={aValues.phone}
        onChange={(e) => setAValues({...aValues, phone: e.target.value})}
        placeholder="输入电话"
      />
      {/* 把状态转成JSON字符串通过搜索参数传递 */}
      <Link 
        href={{ 
          pathname: '/b', 
          query: {aValues: JSON.stringify(aValues)}
        }}
      >
        跳转到B组件
      </Link>
    </div>
  )
}

export default A

B.tsx（服务器组件，无需改为客户端）

// 这依然是服务器组件，不用加'use client'
type BProps = {
  searchParams: { aValues?: string }
}

const B = ({ searchParams }: BProps) => {
  // 解析参数，处理可能的解析错误
  let parsedValues = { name: '', phone: '' };
  if (searchParams.aValues) {
    try {
      parsedValues = JSON.parse(searchParams.aValues);
    } catch (err) {
      console.error('解析参数失败:', err);
    }
  }

  return (
    <div>
      <div>B是服务器组件，显示aValues:</div>
      <p>姓名: {parsedValues.name}</p>
      <p>电话: {parsedValues.phone}</p>
    </div>
  )
}

export default B

这个方案的核心是：服务器组件可以直接接收Next.js自动传入的searchParams props，拿到URL上的参数，不用依赖客户端的useSearchParams钩子。

方案二：通过表单提交传递参数（更直观的方式） #

如果你的场景是用户填写表单后跳转，用表单提交的方式会更清晰，也不用手动处理JSON序列化：

A.tsx（客户端组件）

'use client'
import { useState } from "react"
import { useRouter } from 'next/navigation'

const A = () => {
  const [aValues, setAValues] = useState({
    name: '',
    phone: ''
  });
  const router = useRouter();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // 直接把状态作为查询参数跳转到B路由
    router.push({
      pathname: '/b',
      query: aValues
    });
  };

  return (
    <div>
      <div>A是客户端组件</div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={aValues.name}
          onChange={(e) => setAValues({...aValues, name: e.target.value})}
          placeholder="输入姓名"
          required
        />
        <input
          type="tel"
          value={aValues.phone}
          onChange={(e) => setAValues({...aValues, phone: e.target.value})}
          placeholder="输入电话"
          required
        />
        <button type="submit">提交并查看B组件</button>
      </form>
    </div>
  )
}

export default A

B.tsx（服务器组件）

type BProps = {
  searchParams: { name?: string; phone?: string }
}

const B = ({ searchParams }: BProps) => {
  const name = searchParams.name || '未输入';
  const phone = searchParams.phone || '未输入';

  return (
    <div>
      <div>B是服务器组件，显示表单值:</div>
      <p>姓名: {name}</p>
      <p>电话: {phone}</p>
    </div>
  )
}

export default B

这种方式更符合表单提交的语义，参数也更直观，不用处理JSON的序列化和解析。

为什么你之前的其他方案行不通？ #

• Redux确实是过度设计：只是简单的跨组件状态传递，用路由参数完全足够，没必要引入全局状态管理工具。
• C组件嵌套的方式不可行：服务器组件在后端渲染时，客户端组件的状态还没在浏览器中初始化，没法把动态的客户端状态作为props传给服务器组件——服务器组件只能接收静态props或者来自路由的参数。

备注：内容来源于stack exchange，提问作者Ishaan_B