Next.js服务器端渲染中是否有使用useState的方式？

Question

我想从客户端获取一个值，并在服务器端使用它，

但是我不知道如何使用useState，并且我知道在服务器端没有使用useState的方法 那么有没有其他解决方案可以代替？！ 实际上，在服务器端有一个url，我想从客户端获取值，并在该url中使用${}。

Answer 1

您可以通过将客户端的值通过请求、查询参数或API端点传递给服务器来实现您的目标。

客户端：

import { useState } from 'react';

const MyComponent = () => {
  const [myValue, setMyValue] = useState('');

  const handleSubmit = () => {
    fetch(`/api/myEndpoint?value=${encodeURIComponent(myValue)}`)
      .then((response) => response.json())
      .then((data) => {
        // 如果需要，可以对从服务器返回的数据进行处理
        console.log(data);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  };

  return (
    <div>
      <input value={myValue} onChange={(e) => setMyValue(e.target.value)} />
      <button onClick={handleSubmit}>提交</button>
    </div>
  );
};

服务器端：

export default function handler(req, res) {
  const { value } = req.query;

  // 使用从客户端接收到的'value'

  res.status(200).json({ message: `接收到的值：${value}` });
}