Next.js服务端渲染中useState替代方案及客户端传值至服务端URL问题

核心逻辑很简单：服务端无法直接读取客户端的状态（比如useState的值），必须通过客户端主动传递参数的方式把值送到服务端，服务端拿到后再完成URL拼接。下面分场景给出具体实现：

1. 基础场景：客户端通过HTTP请求传值给服务端 #

客户端（React）：用useState存输入值并发起请求 #

先简单说下useState的用法——它就是用来在客户端组件里存临时状态的，比如用户输入的内容：

import { useState } from 'react';

function InputComponent() {
  // 初始化状态，userInput存输入值，setUserInput用来更新它
  const [userInput, setUserInput] = useState('');

  // 输入框内容变化时更新状态
  const handleInputChange = (e) => {
    setUserInput(e.target.value);
  };

  // 点击按钮把值传给服务端
  const sendToServer = async () => {
    // 方式1：GET请求，把参数放在URL查询字符串里（注意用encodeURIComponent转义特殊字符）
    const response = await fetch(`/api/process?input=${encodeURIComponent(userInput)}`);
    const result = await response.json();
    console.log('服务端返回结果:', result);

    // 方式2：POST请求，把参数放在请求体（适合敏感/大量数据）
    // const response = await fetch('/api/process', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify({ input: userInput })
    // });
  };

  return (
    <div>
      <input 
        type="text" 
        value={userInput} 
        onChange={handleInputChange} 
        placeholder="请输入要传递的值"
      />
      <button onClick={sendToServer}>提交到服务端</button>
    </div>
  );
}

服务端（以Next.js API路由为例）：接收参数并拼接URL #

服务端拿到客户端传来的值后，直接用模板字符串拼接目标URL即可：

// app/api/process/route.js
export async function GET(request) {
  // 从查询参数中提取客户端传来的值
  const { searchParams } = new URL(request.url);
  const userInput = searchParams.get('input');

  if (!userInput) {
    return Response.json({ error: '缺少输入参数' }, { status: 400 });
  }

  // 服务端拼接目标URL
  const targetServerUrl = `https://your-backend-service.com/api/data?param=${encodeURIComponent(userInput)}`;
  
  // 这里可以用拼接好的URL做后续操作，比如请求该接口
  const apiResponse = await fetch(targetServerUrl);
  const data = await apiResponse.json();

  return Response.json({
    targetUrl: targetServerUrl,
    apiResult: data
  });
}

// 如果用POST请求，接收逻辑如下：
// export async function POST(request) {
//   const { input } = await request.json();
//   // 后续拼接URL逻辑同上
// }

2. 服务端渲染场景：通过路由参数/搜索参数传值 #

如果用Next.js这类服务端渲染框架，可以直接把客户端值放到路由的搜索参数里，服务端组件能直接读取：

客户端：跳转带参数的页面 #

import { useRouter } from 'next/navigation';
import { useState } from 'react';

function SearchComponent() {
  const [userInput, setUserInput] = useState('');
  const router = useRouter();

  const handleSubmit = () => {
    // 跳转到带搜索参数的结果页
    router.push(`/result?input=${encodeURIComponent(userInput)}`);
  };

  return (
    <div>
      <input value={userInput} onChange={(e) => setUserInput(e.target.value)} />
      <button onClick={handleSubmit}>获取结果</button>
    </div>
  );
}

服务端组件：直接读取参数并拼接URL #

// app/result/page.js（服务端组件）
export default async function ResultPage({ searchParams }) {
  const userInput = searchParams.input;
  
  if (!userInput) {
    return <div>请先输入内容</div>;
  }

  // 服务端拼接目标URL
  const targetUrl = `https://your-backend-service.com/api/data?param=${encodeURIComponent(userInput)}`;
  const apiData = await fetch(targetUrl).then(res => res.json());

  return (
    <div>
      <h3>拼接后的服务端URL：</h3>
      <p>{targetUrl}</p>
      <h3>API返回结果：</h3>
      <pre>{JSON.stringify(apiData, null, 2)}</pre>
    </div>
  );
}

关键注意点 #

• 必须用encodeURIComponent转义参数，避免特殊字符（比如空格、&、=）破坏URL结构。
• 如果是敏感数据，优先用POST请求传递（放在请求体），不要用GET的查询参数。

内容的提问来源于stack exchange，提问作者sajjad hossein zde