Diferentes formas de obtener datos en Next.js (Framework de React.js)

Tecnología
  
Programación Web
  
Nodejs
  
Javascript
  
Bootstrap
  
Express Js
  
Desarrollo Web
  
Api Rest
    05 Marzo, 2021   Regresar el blog
Compartir:

Al crear una aplicación usando este framework, es probable que necesites obtener datos de un archivo, una ruta API interna o una API externa Además, determinar qué método de obtención de datos a usar en una aplicación Next.js puede volverse confuso fácilmente, especialmente porque no es tan simple como hacer una solicitud de API dentro de la función de procesamiento de sus componentes, como lo haría en una aplicación React estándar. La siguiente guía los ayudará a seleccionar cuidadosamente el método de obtención de datos del lado del servidor que se adapte a su aplicación (para su información, puede usar varios métodos en una sola aplicación). Para cada método, describí cuándo se ejecuta y sus beneficios . Los siguientes métodos obtienen datos en el momento de la compilación o en cada solicitud antes de que los datos se envíen al cliente.

getStaticProps (Generación estática)

Obtener datos en el momento de la compilación.
El método getStaticProps se puede utilizar dentro de una página para obtener datos en el momento de la compilación, Ej. cuando ejecute la próxima compilación. Una vez que se compila la aplicación, no actualizará los datos hasta que se haya ejecutado otra compilación.
Nota: Agregado en Next 9.3

EJEMPLO

export async function getStaticProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()
  if (!data) {
    return {
      notFound: true,
    }
  }
  return {
    props: {}, // se pasará al componente de la página como props
  }
}


Beneficios

  • Permite que la página se genere estáticamente y producirá tiempos de carga rápidas de todos los métodos de obtención de datos.
  • Si cada página de su aplicación utiliza getStaticProps (o ningún método de obtención de datos del lado del servidor), Next.js podrá exportarlo a HTML estático utilizando la siguiente exportación. Esto es ventajoso si desea crear un sitio estático que se pueda alojar en lugares como las páginas de GitHub.
  • Los datos se procesan antes de que lleguen al cliente, lo que es excelente para SEO.

getServerSideProps (representación del lado del servidor)

Obtenga datos en cada solicitud.
El método getServerSideProps obtiene datos cada vez que un usuario solicita la página. Obtendrá los datos antes de enviar la página al cliente (en lugar de cargar la página y obtener los datos en el lado del cliente). Si el cliente realiza una solicitud posterior, los datos se recuperarán nuevamente.
Nota: Agregado en Next 9.3

EJEMPLO

export async function getServerSideProps(context) {
  const res = await fetch(`https://...`)
  const data = await res.json()
  if (!data) {
    return {
      notFound: true,
    }
  }
  return {
    props: {}, //  se pasará al componente de la página como props
  }
}


Beneficios

  • Los datos se actualizan cada vez que un cliente carga la página, lo que significa que está actualizada cuando visita la página.
  • Los datos se procesan antes de que lleguen al cliente, lo que es excelente para SEO.

getInitialProps (Server-side Rendering)

Obtenga datos en cada solicitud.
getInitialProps fue la forma original de obtener datos en una aplicación Next.js en el lado del servidor. A partir de Next.js 9.3, debes usar los métodos discutidos anteriormente. Entonces porque deberia hablar de getInitialProps?: 1) Todavía se puede usar, aunque los encargados de mantenimiento de Next.js le aconsejan que no lo haga, ya que getStaticProps y getServerSideProps le permiten elegir entre la obtención de datos estáticos o del lado del servidor. 2) Saber acerca de getInitialProps ayuda cuando se encuentra con una antigua consulta de Stack Overflow que lo menciona, ¡y también que no debe simplemente copiar y pegar esa solución!
Nota: Si está en Next.js 9.3 o superior, utilice los dos métodos anteriores.

EJEMPLO

function Page({ stars }) {
  return 
Next stars: {stars}
} Page.getInitialProps = async (ctx) => { const res = await fetch(´https://api.github.com/repos/vercel/next.js´) const json = await res.json() return { stars: json.stargazers_count } } export default Page

Beneficios

Igual que getServerSideProps

¿Cómo decidir cuál usar?

Cuando uso Next.js, siempre intento que cada página sea estática. Esto significa que trato de evitar el uso de getServerSideProps y prefiero getStaticProps. Sin embargo, si los datos que obtengo cambian con frecuencia, por supuesto, usaré getServerSideProps. Ya nunca uso getInitialProps. Entonces, normalmente intento getStaticProps y si eso está causando que los datos se vuelvan obsoletos, entonces me muevo a getServerSideProps. Fuente: https://nextjs.org/docs/basic-features/data-fetching
Y con esos amigos llegamos al final del tutorial, espero que lo hayan disfrutado y ¡hasta la próxima!

283 vistas
Compartir:


Autor
Jose Fuentes

- Web Developer -

 


0 COMENTARIO(S)
Contesta
Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *
Comentario *
Nombre *
Correo electrónico *
Sitio web

Articulos Relacionados
Articulos recientes

Desarrollos en venta

$ usd dólar 600