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! 🎓