Función siguiente.js getStaticProps()

Para crear cualquier aplicación web moderna, es muy necesario obtener datos de manera eficiente para que el usuario final pueda tener una experiencia perfecta con nuestra aplicación. Entonces, en este artículo, vamos a echar un vistazo a una técnica de obtención de datos en reaccionar usando NextJS. Pero primero, veamos qué es NextJS.

NextJS es un marco para React desarrollado por vercel que brinda muchos beneficios sobre la aplicación de reacción de creación simple, como la generación de sitios estáticos, la generación del lado del servidor, el enrutamiento basado en archivos, las rutas API, etc. Es casi un marco completo que no solo se ejecuta en del lado del cliente sino también del lado del servidor.

Paso 1: para crear un proyecto NextJS, ejecute los siguientes comandos en la terminal

npx create-next-app <your app name>
cd <your app folder>

Paso 2: abra los archivos de su proyecto en el editor de código que desee y ejecute el servidor de desarrollo con este comando

npm run dev

Ahora, navegue a https://localhost:3000 para obtener una vista previa

Pantalla de bienvenida de NextJS

Estructura del proyecto: Además, la carpeta de su proyecto debería verse así,

 

Ahora analicemos la obtención de datos en NextJS.

Obtención de datos en NextJS: para obtener los datos de nuestro propio backend o mediante el uso de API de terceros, generalmente usamos la obtención del lado del cliente mediante la API de obtención proporcionada por el navegador. Obtiene los datos del lado del cliente en cada solicitud o recarga del navegador. Pero NextJS nos brinda mejores formas de obtener los datos del servidor. Nos brinda funciones para renderizar previamente nuestro HTML en tiempo de compilación o tiempo de solicitud . Esas funciones son

• getServerSideProps: representa los datos en cada solicitud. Se ejecuta en el lado del servidor y nunca en el navegador. 
• getStaticProps: ayuda a generar la página HTML en el momento de la compilación (cuando el código se implementa en producción). Es eficiente para datos estáticos que cambian con menos frecuencia.

getStaticProps: es una función asíncrona que exportamos desde el componente de la página, utilizada para generar datos sobre el tiempo de compilación. Obtiene los datos y genera las páginas HTML en nuestro servidor y las almacena en caché. Entonces, cuando navegamos a esta página en nuestro lado del cliente, la página HTML almacenada en caché se nos entrega directamente, lo cual es muy útil para la optimización de motores de búsqueda (SEO).

El código que escribimos dentro de getStaticProps es seguro y nunca se ejecuta en el navegador. Entonces, también podemos acceder a nuestra base de datos usando ORM como Prisma dentro de esta función, ya que se ejecuta en el servidor.

índice.js

export async function getStaticProps() {
 
  // Data fetching
  return {
   
      // data added inside props will be
    // received by page component as `props`
    props: {},
  };
}

Devolvemos un objeto de esta función donde pasamos la propiedad `props` con los datos que desea proporcionar al componente de la página. ¿Cuándo debemos usar getStaticProps?

• Cuando los datos no cambian con frecuencia como un sitio web de blog
•  Datos que provienen de cualquier sistema de gestión de contenido (CMS).
• Para ser ultrarrápido, HTML prerenderizado y compatible con SEO.

Veamos cómo funciona obteniendo datos de pokemon de PokeAPI

Dentro de la carpeta de páginas de su proyecto y en index.js , elimine la línea de código anterior y cree un componente de página y la función getStaticProps.

// Page Component, receiving allPokemons
// from getStaticProps
export default function Home({ allPokemons }) {
    return (
        <ul>
            { /* mapping all the data inside
            an unordered list */}
            {allPokemons.map((poke) => (
                <li key={poke.url}>{poke.name}</li>
            ))}
        </ul>
    );
}
 
export async function getStaticProps() {
 
    // Call the fetch method and passing
    // the pokeAPI link
    const response = await fetch(
        'https://pokeapi.co/api/v2/pokemon/');
 
    // Parse the JSON
    const data = await response.json();
 
    // Finally we return the result
    // inside props as allPokemons
    return {
        props: { allPokemons: data.results },
    };
}

Producción:

Datos obtenidos mostrados dentro de una lista desordenada

Referencias: https://nextjs.org/docs/basic-features/data-fetching/overview