Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

235
Vistas
Cómo cambiar las variables del lado del servidor en el lado del cliente nextjs

Así que tengo este código en api/scraper.js

 const request = require("request-promise"); const cheerio = require("cheerio"); let url = "https://crese.org/distintivo-azul/"; let result; request(url, (err, response, html) => { if (!err && response.statusCode == 200) { const $ = cheerio.load(html); const allText = $("html *").contents().filter(function () {return this.type === "text"}).text(); const texts = ["respeto a la dignidad de las personas", "respect for the dignity of people"] result = allText.includes("respeto a la dignidad de las personas") } }) export default function handler(req, res) { res.status(200).json({result: result}) }

Funciona todo, pero la variable let url , necesita cambiar. Tengo un formulario para manejar este cambio, por lo que el usuario puede poner la url en el formulario de entrada desde el lado del cliente... ¿cómo se puede cambiar cuando el usuario envía la url desde el "formulario de entrada" del cliente y cambia esa url ? variable en el lado del servidor.

En palabras simples, "Modificar la variable de URL que está en api/scraper.js" con la etiqueta de formulario que está en el lado del cliente.

¿Alguna idea para manejar esto?

EDITAR El lado del cliente se ve así

 // Automate steps process const handleSubmit = async (event) => { event.preventDefault(); const response = await fetch("/api/scraper"); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const result = await response.json(); console.log(Object.values(result)) return setData(result) //console.log(event.target.url.value); }; // get results from backend const [results, setData] = useState([]) return ( <div> <Head> <title>Blue Token | Steps</title> <meta name="description" content="Generated by create next app" /> <link rel="icon" href="/logo.png" /> </Head> <div className={styles.minting}> <form onSubmit={handleSubmit}> <h1>Enter Your website URL</h1> <label>We are going to check if you have the requesits</label><br /><br /> <input type="url" name="url" placeholder="url" /> <input type="submit" /> </form>
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Puedes hacer algo como esto. Deberá pasar la URL del cliente dentro del cuerpo de la solicitud http

 function startScrape(req, res) { request(req.body, (err, response, html) => { if (!err && response.statusCode == 200) { const $ = cheerio.load(html); const allText = $("html *") .contents() .filter(function () { return this.type === "text"; }) .text(); const texts = [ "respeto a la dignidad de las personas", "respect for the dignity of people" ]; let result = allText.includes("respeto a la dignidad de las personas"); res.status(200).json({ result: result }); } }); } export default function handler(req, res) { if(req.method==='POST') startScrape(req, res); }

Cliente

 const [results, setData] = useState([]); const [url, setUrl] = useState(""); const handleSubmit = async (event) => { event.preventDefault(); // Here we're passing url inside body of the request which will // be received on the backend const response = await fetch("/api/scraper", { method: "POST", body: url }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const result = await response.json(); console.log(Object.values(result)); return setData(result); //console.log(event.target.url.value); }; return ( <div> <div> <form onSubmit={handleSubmit}> <h1>Enter Your website URL</h1> <label>We are going to check if you have the requesits</label> <br /> <br /> <input type="url" name="url" placeholder="url" value={url} onChange={(e) => setUrl(e.target.value)} /> <input type="submit" /> </form> </div> </div> );
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda