Existe-t-il un moyen d'utiliser useState dans le rendu côté serveur Next.js ?

Question

Je souhaite obtenir une valeur côté client et l'utiliser côté serveur,

Mais je ne sais pas comment utiliser useState, et je sais qu'il n'y a aucun moyen d'utiliser useState côté serveur Alors, existe-t-il une autre solution qui pourrait être utilisée à la place ? ! En fait, il y a une URL côté serveur et je souhaite obtenir la valeur du client et utiliser ${} dans cette URL.

Answer 1

Vous pouvez atteindre vos objectifs en transmettant des valeurs côté client au serveur via des requêtes, des paramètres de requête ou des points de terminaison d'API.

Client :

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

Côté serveur :

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

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

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