Estuve creando una aplicación con NextJS, mi problema surgió cuando intenté generar contenido nuevo desde una API al hacer clic en un botón. Recibo la llamada del servidor con éxito, pero se actualiza solo cuando vuelvo a cargar la página, no cuando hago clic en el botón como quiero. Aquí está el código:
import React, {useState} from 'react' import { FaCog } from 'react-icons/fa' export async function getServerSideProps() { const res = await fetch(`https://animechan.vercel.app/api/random`) const data = await res.json() return { props: { quote: data.quote, anime: data.anime, character: data.character } } } const Button = () => { const [clicked, setClicked] = useState(false) const handleClicked = (props) => { return ( <div> <p style={{fontWeight: 'bold'}}>{props.anime}</p> <p>{props.quote}</p> <p style={{fontWeight: 'bold'}}>-{props.character}</p> </div> ) setClicked(!clicked) } return ( <div className="main_button"> <button onClick={handleClicked}>{clicked ? 'Generate again...' : 'Generate content '} <FaCog className={clicked ? 'main_button-spinner' : null}/> </button> </div> ) } export default ButtonQuiero que cada vez que haga clic en el botón, el contenido se actualice y reciba contenido nuevo de la API. Como expliqué anteriormente, esto funciona bien en la llamada API, pero el contenido se actualiza simplemente recargando la página y no como necesito que funcione. ¿Alguna idea?
Está malinterpretando el rol de getServerSideProps . Eche un vistazo a la documentación de Next.js: https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props
getServerSidePropssolo se ejecuta en el lado del servidor y nunca se ejecuta en el navegador
Si desea que su aplicación React cambie en respuesta a esta API, debe enviar una solicitud a la API desde el código React (en respuesta al clic del botón), guardar los resultados de la API en el estado y luego mostrar los resultados en la interfaz.
El pseudocódigo sigue:
const [data, setData] = useState(null); // ... async function handleClicked() { const apiResponse = await fetch("..."); setData(apiResponse); // Or whatever properties from the response you care about } // ... <button onClick={handleClicked}> {clicked ? 'Generate again...' : 'Generate content '} <FaCog className={clicked ? 'main_button-spinner' : null}/> </button>