¿Cuál es la diferencia entre getServerSideProps, getStaticProps y getStaticPaths en Next.js?

getServerSideProps es una función de Next.js que se utiliza para obtener los datos de forma asincrónica en tiempo de ejecución en el servidor cada vez que se realiza una petición. Esto significa que los datos pueden ser dinámicos y se actualizan siempre que se solicitan. Esta función se utiliza generalmente cuando se necesita acceder a información en tiempo real, como por ejemplo un perfil de usuario actualizado cada vez que se visita una página.

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
  
  return {
    props: {
      data
    }
  }
}

getStaticProps se utiliza para obtener los datos de forma asincrónica en tiempo de compilación y generar una versión estática de una página que se envía al navegador. Esto significa que los datos se generan una sola vez y se almacenan en caché para su uso repetido. Esta función se utiliza generalmente cuando se necesita un contenido estático que no cambia con frecuencia, como por ejemplo una página de inicio o una página de lista de productos.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()

  return {
    props: {
      data
    },
    revalidate: 60 // tiempo de revalidación en segundos
  }
}

getStaticPaths se utiliza para generar páginas estáticas dinámicas con rutas que contienen variables que pueden cambiar con frecuencia. Esta función genera una matriz de rutas que se pueden precompilar para mejorar el rendimiento del sitio. Se usa especialmente en proyectos con rutas dinámicas como los blogs.

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/reports')
  const reports = await res.json()

  const paths = reports.map(report => ({
    params: { id: report.id }
  }))

  return {
    paths,
    fallback: false // solo muestre la página si tenemos datos que coincidan exactamente con la ruta
  }
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/reports/${params.id}`)
  const report = await res.json()

  return {
    props: {
      report
    }
  }
}

En resumen:

• getServerSideProps se utiliza para obtener datos en tiempo de ejecución en el servidor cada vez que se realiza una petición.
• getStaticProps se utiliza para obtener datos en tiempo de compilación y generar una versión estática de una página que se envía al navegador y se almacena en caché.
• getStaticPaths se utiliza para generar páginas estáticas dinámicas con rutas que contienen variables que pueden cambiar con frecuencia.