Recupere datos del lado del servidor y guárdelos en contexto con Next.js

Hemos estado recabado en el mundo online y así traerte la solución a tu duda, en caso de dudas puedes dejarnos la duda y respondemos sin falta.

Solución:

En Next.js, no hay una función nativa para a) recuperar datos de una API, b) hacerlo en el servidor, c) hacer que esté disponible en todas las páginas y d) solo consultar la API en la primera página que visita el usuario.

Como has averiguado, getInitialProps y getServerSideProps se ejecutará cada vez que visite esa página.

Sin embargopodemos hacer que esto funcione.

Si necesita los datos antes de la carga inicial

1. Usar getInitialProps en _app.js para recuperar datos de la API
2. Cargue los datos en el contexto React dentro del _app.js archivo para que persista entre páginas
3. Cuando el navegador obtiene los datos, crea una cookie.
4. En una carga de página posterior, en getInitialProps, compruebe si hay una cookie. Si es así, no recupere los datos.

Hay una biblioteca bastante popular llamada nookies para ayudar con las cookies en un proyecto Next.js.

Si puede cargar la página, busque los datos

Hay un costo de rendimiento al usar getInitialProps en _app.js: nunca podrás crear un completo static página. Eso es porque getInitialProps tendrá que ejecutarse en cada carga de una sola página.

Si puede obtener los datos después de cargar la página, agregue una ruta API. Luego, en el proveedor de contexto, use useEffect para obtener los datos.

Sección de Reseñas y Valoraciones

---

---

Utiliza Nuestro Buscador