Uso de getStaticPaths y getStaticProps en Next.js para páginas dinámicas

¿Cómo se utiliza Get Static Props en Next.js?

Cuando construimos aplicaciones web, una estrategia eficiente de renderizado puede marcar la diferencia en la experiencia del usuario. En Next.js, getStaticProps juega un papel crucial para optimizar nuestras páginas, especialmente cuando se trata del "Build Time". Este método es ideal para las páginas no dinámicas ya que proporciona a React información de manera anticipada sobre qué datos se requerirán.

¿Cómo funciona getStaticProps?

• Solo se ejecuta una vez, durante el proceso de construcción (build time).
• Determina los datos necesarios para mostrar la página estáticamente.
• Devuelve propiedades que utiliza la página en cuestión.

Por ejemplo, si queremos alimentar nuestra página con información de una planta, getStaticProps nos permite definir qué propiedades (props) necesita React para renderizar la página correctamente.

export async function getStaticProps(context) {
  const data = await fetch('https://miapi.com/planta');
  const planta = await data.json();

  return {
    props: {
      planta,
    },
  };
}

Aquí, recuperamos los datos de una API y los pasamos como propiedades que usará la página.

¿Qué es Get Static Paths y cómo se utiliza?

Cuando te encuentras gestionando páginas dinámicas, como entradas de blogs con slugs dinámicos en sus URLs, getStaticPaths es tu aliado. Este método complementa a getStaticProps y le dice a Next.js qué rutas dinámicas necesitamos generar en el momento de la construcción.

¿Cómo definir los caminos con getStaticPaths?

• Define qué rutas se deben construir estáticamente.
• Utiliza un array donde cada elemento es un objeto que contiene las propiedades necesarias para cada página.

export async function getStaticPaths() {
  const res = await fetch('https://miapi.com/plantas');
  const plantas = await res.json();

  const paths = plantas.map((planta) => ({
    params: { slug: planta.slug },
  }));

  return { paths, fallback: false };
}

En el ejemplo, se traen las plantas desde una API, generando un array de rutas que Next.js usará para crear esas páginas en el build time.

¿Cómo mejorar la escalabilidad de nuestras páginas?

El uso combinado de getStaticProps y getStaticPaths proporciona eficiencia, pero, como cualquier estrategia, tiene sus limitaciones. Por ejemplo, la necesidad de definir todas las rutas en build time puede presentar problemas si el número de páginas crece enormemente. Para abordar esta limitación:

1. Optimización de Peticiones: Utilizar límites en peticiones API para no cargar más información de la necesaria.
2. Validación de Slugs: Implementar validaciones para asegurar que los slugs dinámicos sean correctos y prevenir errores en las rutas.
3. Pruebas Efectivas: Realizar pruebas para visualizar el desempeño de la aplicación y ajustar las configuraciones de build si es necesario.

Explora todo el potencial de Next.js

La capacidad de generar páginas de manera estática es solo una de las muchas características avanzadas de Next.js. Para profundizar y dominar estas técnicas, considera explorar cursos que cubren desde fundamentos hasta aspectos técnicos avanzados. ¡Nunca dejes de aprender y experimentar con nuevas estrategias para mejorar la experiencia y el rendimiento de tus proyectos!