Soy nuevo en next.js. Quiero pasar el estado de la página a getServerSideProps. ¿Es posible hacer esto?
const Discover = (props) => { const [page, setPage] = useState(1); const [discoverResults, setDiscoverResults] = useState(props.data.results); // console.log(discoverResults, page); return ( <div> <Card items={discoverResults} render={(discoverResults) => <DiscoverCard results={discoverResults} />} /> </div> ); }; export default Discover; export async function getServerSideProps() { const movieData = await axios.get(`https://api.themoviedb.org/3/discover/movie?api_key=${process.env.NEXT_PUBLIC_MOVIE_DB_KEY}&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=${page}&with_watch_monetization_types=flatrate`); return { props: { data: movieData.data, }, }; }la única forma es cambiar su ruta con parámetros y recibirla en el lado del servidor:
import { useRouter } from "next/router"; const Discover = (props) => { const { page } = props; const router = useRouter(); const goToNextPage = () => { router.replace(`/your-page-pathname?page=${+page + 1}`); } return ( <div> page is : {page} <button onClick={goToNextPage}> next page </button> </div> ); }; export default Discover; export async function getServerSideProps(context) { const { page } = context.query; return { props: { page: page || 0, }, }; }Para leer más sobre el tema, recomiende leer: Actualizar accesorios del lado del servidor
Recomiendo usar SWR para manejar este tipo de llamadas API
un ejemplo de esto aquí: https://swr.vercel.app/examples/ssr
En este ejemplo, se puede ver que las llamadas a la API ocurren en el lado del servidor y se almacenan en caché en el lado del cliente.
Para manejar la consulta desde las urls. Esto se puede hacer usando los mismos métodos y siguiendo los ejemplos de su documentación de SWR https://swr.vercel.app/docs/pagination#pagination
SWR ayudará a muchas cosas en la gestión del estado de API. Realmente recomiendo comenzar a aprenderlo lo antes posible..