Gibt es eine Möglichkeit, useState im serverseitigen Rendering von Next.js zu verwenden?

Question

Ich möchte einen Wert von der Clientseite erhalten und ihn auf der Serverseite verwenden,

Aber ich weiß nicht, wie man useState verwendet, und ich weiß, dass es keine Möglichkeit gibt, useState auf der Serverseite zu verwenden Gibt es also eine andere Lösung, die stattdessen verwendet werden kann? ! Eigentlich gibt es eine URL auf der Serverseite und ich möchte den Wert vom Client abrufen und ${} in dieser URL verwenden.

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}` });
}