Obteniendo Datos con Next.js
Feb 21, 2022

Obteniendo Datos con Next.js

Hay 馃専 muchas maneras de traer datos a nuestra aplicaci贸n con Next.js. Dependiendo de cu谩ndo y c贸mo necesites la informaci贸n, habr谩 varias alternativas que te pueden funcionar 馃洜.

Empecemos por lo que ya sabes 馃. Si quieres traer datos del lado del cliente lo debes seguir haciendo como lo haces normalmente. Usando axios, fetch, swr o react-query dentro del ComponentDidMount o dentro del hook que est茅s usando.

鈿狅笍 Tip: Next.js autom谩ticamente inyecta fetch para que lo puedas usar en tu aplicaci贸n.

Ahora si tu objetivo es obtener datos desde el lado del servidor o "antes de tiempo" (Ahead of time), tenemos tres opciones 馃殌:

  1. getStaticProps
  2. getStaticPaths
  3. getServerSideProps
Datos est谩ticos (Static Data) 馃搳

Todos los m茅todos anteriores son para el prerenderizado de p谩ginas solamente. T煤 no puedes usarlos en componentes o para traer datos del lado del cliente.

Hablemos entonces sobre getStaticProps en una p谩gina:

// Creamos un archivo llamado 'index.js' dentro de la carpeta 'pages'
// Este archivo define un componente de funci贸n llamado 'IndexPage'
const IndexPage = () => {
  // Aqu铆 se escribe JSX que define el contenido del componente 'IndexPage'
}

// Exportamos el componente 'IndexPage' como el valor predeterminado de este archivo
export default IndexPage

// Creamos una funci贸n asincr贸nica llamada 'getStaticProps' que se utilizar谩 en la generaci贸n est谩tica de p谩ginas en Next.js
export async function getStaticProps(context) {
  // Aqu铆 definimos las propiedades que se pasar谩n al componente 'IndexPage'
  return {
    props: {}
  }
}

Por tener escrita esta funci贸n en el archivo de tu p谩gina y export谩ndola por defecto, Next.js va a ejecutar esta funci贸n en tiempo de construcci贸n. Y cualquier resultado ser谩 pasado como una propiedad en la p谩gina exportada.

鈿狅笍 Tip: Los resultados de esta funci贸n ser谩n guardados dentro de un archivo JSON y pasados como propiedad en el componente de la p谩gina del lado de cliente en tiempo de ejecuci贸n.

Esta funci贸n al igual que las otras, solo se ejecutar谩 del lado del servidor. De hecho, ni siquiera el c贸digo de esta funci贸n se enviar谩 al c贸digo del cliente, por tanto, se pueden hacer cosas muy interesantes aqu铆 馃鈥嶁檪锔:

  • Interactuar con el sistema de archivos.
  • Conectarse a una base de datos.
  • Trabajo costoso del lado del backend.

El objeto de contexto que tiene los par谩metros cuando un usuario consulta una de nuestras p谩ginas y esta p谩gina es din谩mica, es decir tiene [id].js o [parametro].js o lo que sea dentro de [ ]. Por esto, el objeto contexto tiene en context.params estos par谩metros. Pero imagina que tienes una lista de posts y t煤 no sabes cu谩ntos ni cu谩les son y a煤n quieres hacer que tu sitio sea est谩tico. All铆 entra a jugar el m茅todo getStaticPaths. Veamos un ejemplo:

// Creamos un archivo llamado '[slug].js' dentro de la carpeta 'blog' en la carpeta 'pages'
// Este archivo define un componente de funci贸n llamado 'IndexPage'
const聽IndexPage聽=聽()聽=>聽{
  // Aqu铆 se escribe JSX que define el contenido del componente 'IndexPage'
}
// Exportamos el componente 'IndexPage' como el valor predeterminado de este archivo
export聽default聽IndexPage

// Creamos una funci贸n asincr贸nica llamada 'getStaticPaths' que se utilizar谩 en la generaci贸n est谩tica de p谩ginas en Next.js
// Esta funci贸n devuelve un objeto con la propiedad 'paths', que contiene los par谩metros slug de cada p谩gina que debe ser generada est谩ticamente
export聽async聽function聽getStaticPaths()聽{
  // Aqu铆 se obtienen los par谩metros slug de cada p谩gina de publicaci贸n de un API o sistema de archivos
  const results聽=聽await聽fetch('/api/posts')
  const posts聽=聽await results.json()
  const paths聽= posts.map(post聽=>聽({params:聽{slug:聽post.slug}}))
  // El objeto 'paths' debe tener la forma de [{params: {slug: 'post-slug'}}]
  return聽{paths}
}

// Creamos una funci贸n asincr贸nica llamada 'getStaticProps' que se utilizar谩 en la generaci贸n est谩tica de p谩ginas en Next.js
// Esta funci贸n devuelve un objeto con las propiedades que se pasar谩n al componente 'IndexPage'
export聽async聽function聽getStaticProps({ params聽})聽{
  // Aqu铆 se obtienen los datos de la p谩gina de publicaci贸n con un par谩metro slug espec铆fico
  const res聽=聽await聽fetch(`/api/post/${params.slug}`)
  const post聽=聽await res.json()
  return聽{
    props:聽{post}
 聽}
}
Rutas est谩ticas (Static Paths) 馃洠锔

Si una p谩gina tiene una ruta din谩mica [id].jsx y usa getStaticProps, tambi茅n deber谩 usar getStaticPaths para poder prerenderizar todas las p谩ginas en tiempo de compilaci贸n en el HTML.

鈿狅笍 Tip: Usa fallback: true como par谩metro de retorno para el m茅todo getStaticPaths si t煤 tienes un sitio web muy grande y t煤 no quieres est谩ticamente prerenderizar toooodas las p谩ginas de una sola vez y en vez de eso quieres hacer alguna fetch de datos directamente usando server side rendering y alguna paginaci贸n.

Datos desde el servidor (Server Data) 馃寪

Finalmente, tenemos el getServerSideProps, este m茅todo se ejecutar谩 cada vez que se entre a la p谩gina donde lo has escrito, entonces a diferencia de getStaticProps t煤 vas a esperar por todos los datos del API incluyendo par谩metros, headers y el request y response. Veamos un ejemplo:

// Creamos un componente de funci贸n llamado 'IndexPage'
const IndexPage = () => {
  // Aqu铆 se escribe JSX que define el contenido del componente 'IndexPage'
}

// Exportamos el componente 'IndexPage' como el valor predeterminado de este archivo
export default IndexPage

// Creamos una funci贸n asincr贸nica llamada 'getServerSideProps' que se utilizar谩 en la generaci贸n del lado del servidor de p谩ginas en Next.js
// Esta funci贸n devuelve un objeto con las propiedades que se pasar谩n al componente 'IndexPage'
export async function getServerSideProps() {
  // Aqu铆 se obtienen los datos de alguna fuente externa (en este caso, la API 'https://somedata.com') y se convierten en un objeto JSON
  const response = await fetch(`https://somedata.com`)
  const data = await response.json()

  // Devolvemos un objeto con la propiedad 'props' que contiene los datos obtenidos como una propiedad del componente 'IndexPage'
  return { props: { data } }
}
Entonces... 驴Cu谩ndo usar cu谩l? 馃
  • 驴Necesitas usar datos en tiempo de ejecuci贸n y NO necesitas Server Side Rendering? R/: Usa fetch o axios desde el lado del cliente en el componentDidMount o en el hook adecuado.
  • 驴Necesitas datos en tiempo de ejecuci贸n que var铆an de request a request y SI necesitas Servier Side Rendering? R:/ Usa getServerSideProps
  • 驴Tienes p谩ginas que traen informaci贸n que no cambia mucho y que es cacheable y adem谩s esta informaci贸n est谩 disponible en tiempo de compilaci贸n, por ejemplo, un CMS? R:/ Usa getStaticProps
  • 驴Tienes p谩ginas que traen informaci贸n que no cambia mucho y que es cacheable y adem谩s esta informaci贸n est谩 disponible en tiempo de compilaci贸n pero adem谩s la p谩gina recibe par谩metros? R:/ Usa getStaticProps y getStaticPaths

鈿狅笍 Tip: Next.js sigue mejorando en lo que respecta a la obtenci贸n de datos, es de lejos mi parte favorita ya que tiene poca o ninguna sobrecarga y es extremadamente potente.

Eso es todo, espero que este post te sea de utilidad y lo puedas aplicar a alg煤n proyecto que tengas en mente o que simplemente te haya ayudado a entender cu谩les son los mecanismos que tiene Next.js para la obtenci贸n de datos.

馃摑 Resumen de 3 puntos:

  1. Next.js ofrece diferentes m茅todos para obtener datos: getStaticProps, getStaticPaths, y getServerSideProps.
  2. getStaticProps y getStaticPaths son 煤tiles para prerenderizar p谩ginas est谩ticas y din谩micas en tiempo de compilaci贸n, mientras que getServerSideProps se utiliza para el Server Side Rendering.
  3. Elegir el m茅todo adecuado para obtener datos en Next.js depende de si necesitas Server Side Rendering, la frecuencia con la que cambian los datos y si la informaci贸n est谩 disponible en tiempo de compilaci贸n.

D茅jame un comentario si te sirvi贸, si quieres a帽adir alguna opini贸n o si tienes alguna duda, no dudes en dejarme un comentario enla parte de abajo. Recuerda que si te gust贸, tambi茅n puedes compartir usando los links a las redes sociales en la parte de abajo. 馃檶

Ejercicios propuestos 馃挕
  1. Crea un proyecto b谩sico de Next.js e implementa un ejemplo de getStaticProps para traer datos desde un archivo JSON local.
  2. Modifica el proyecto anterior y crea una p谩gina con ruta din谩mica utilizando getStaticPaths y getStaticProps para generar p谩ginas est谩ticas con datos espec铆ficos.
  3. A帽ade al proyecto una funci贸n que utilice getServerSideProps para obtener datos desde una API externa y muestre los resultados en una p谩gina.
  4. Implementa una funci贸n de paginaci贸n en la p谩gina donde utilizaste getServerSideProps para limitar el n煤mero de resultados mostrados y permitir la navegaci贸n entre p谩ginas de resultados.
  5. Realiza pruebas de rendimiento y compara los tiempos de carga y procesamiento de las p谩ginas utilizando getStaticProps, getStaticPaths y getServerSideProps. Analiza en qu茅 casos es m谩s conveniente usar cada m茅todo.

隆Buena suerte con tus ejercicios! 馃崁 No dudes en compartir tus resultados y preguntas en los comentarios. Estar茅 encantado de ayudarte si tienes alguna duda o dificultad en el proceso. 隆Feliz aprendizaje! 馃帗

Sebastian Gomez

Sebastian Gomez

Creador de contenido principalmente acerca de tecnolog铆a.

Leave a Reply

0 Comments

Related Posts

Categorias