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