Así que creé una aplicación en React pero luego cambié a Next.js ya que mi proveedor de API solo aceptaba llamadas de API en el lado del servidor, había creado una paginación en React muy fácilmente usando useState y literales de plantilla, sin embargo, estoy un poco confundido cómo Yo haría lo mismo cuando las llamadas a la API se realicen en el lado del servidor.
Mi código de búsqueda del lado del servidor es simple y se ve así:
export async function getStaticProps() { try { const result = await fetch(`https://exampleapi.com/running?sort=&page={$page_no}&per_page=30&#`); const data = await result.json(); return { props: { game: data }, }; } catch (error) { res.statusCode = 404; return { props: {} }; } } const BoxScore = () => { const [page_no, setPage_no] = useState(1); const incrementPageNumber = () => { setPage_no((page_no) => page_no + 1); console.log(page_no); }; const decrementPageNumber = () => { if (page_no <= 1) return; setPage_no((page_no) => page_no - 1); }; return ( <div className="container"> <div className="ctrl-div"> <button className="ctrl-butts" onClick={incrementPageNumber} >Next</button> <button className="ctrl-butts" onClick={decrementPageNumber}> Previous</button> </div> <div className="container"> <h2>Live Games - </h2> <div className="columns is-multiline"> {game.map(q => ( <div className="column is-half" key={q.id}> <div className="inner"> {q.name} </div> </div> Así que quiero pasar {page_no} a la solicitud de API que estoy haciendo para que mis páginas puedan cambiar dinámicamente, sé que no puedo pasar los valores de estado a getStaticProps como se menciona en los documentos, pero como estoy restringido solo a la obtención de datos de SSR , no estoy seguro de cómo proceder con esto. Cualquier idea o recurso para abordar esto sería muy apreciado.
Editar: para aclarar, agregué más código, básicamente: estoy tratando de paginar los datos que recibo de la API y la API tiene un punto final de paginación, por lo que esto lo hace un poco más fácil, simplemente no estoy seguro de cómo pasaría el valor de mi {page_no} en el método getStaticProps .
Debe obtener datos dinámicos en getStaticProps porque solo se ejecuta durante el tiempo de compilación. (la excepción es la regeneración estática incremental pero no funcionará en su caso) Debe usar getServerSideProps y leer los parámetros de consulta. Las funciones del lado del servidor en next.js aceptan argumentos de context .
export async function getServerSideProps(context) { // console.log(context) try { const { query } = context; // since query is an obj, you can add properties withoud defining as let keyword above if (!query.page) { query.page = "1"; } const result = await fetch(`https://exampleapi.com/running?sort=&page=${query.page}&per_page=30&#`); const data = await result.json(); return { props: { game: data }, }; } catch (error) { res.statusCode = 404; return { props: {} }; } }