Métodos de obtención de datos en Next.js

Next.js es un framework full-stack basado en React que habilita funcionalidades como la renderización previa de páginas web. A diferencia de la aplicación de reacción tradicional en la que toda la aplicación se carga en el cliente, Next.js permite que la página web se represente en el servidor, lo que es excelente para el rendimiento y el SEO. Puede obtener más información sobre Next.js aquí .

Next.js proporciona tres métodos de obtención de datos y, en función de estos métodos, representa el contenido de forma diferente. (Puede obtener información sobre los diferentes métodos de renderizado aquí .

1. getStaticProps
2. getStaticPaths
3. getServerSideProps

getStaticProps: carga previamente todos los datos necesarios para una página determinada y muestra las páginas antes de la solicitud del usuario en el momento de la compilación. Para una recuperación más rápida, todos los datos se almacenan en caché en un CMS sin encabezado. Para un mejor rendimiento de SEO, la página se renderiza previamente y se almacena en caché. Si no se especifica ningún otro método de obtención de datos, Next.js lo utilizará de forma predeterminada. Se utiliza para implementar la generación de sitios estáticos y la regeneración incremental de sitios.

Propiedades de getStaticProps: 

1. Solo se puede exportar desde el archivo de la página, no desde el archivo del componente.
2. Solo se ejecuta en tiempo de compilación.
3.  Se ejecuta en cada solicitud posterior en modo de desarrollo.
4. Su código está completamente excluido del paquete del lado del cliente.

getStaticPaths: si una página usa getStaticProps y tiene rutas dinámicas, debe declarar una lista de rutas que se generarán estáticamente. Next.js renderizará previamente de forma estática todas las rutas definidas por getStaticPaths cuando exportamos una función llamada getStaticPaths desde una página.

Propiedades de getStaticPaths:

1.  Solo se puede exportar desde un archivo de página.
2. Está destinado a rutas dinámicas.
3. La página también debe implementar getStaticProps.
4.  Se ejecuta solo en el momento de la compilación en producción.
5. Se ejecuta en cada solicitud en el modo de desarrollo.

getServerSideProps: renderizará previamente la página en cada solicitud posterior. Es más lento en comparación con getStaticProps ya que la página se procesa en cada solicitud. Los accesorios getServerSideProps devuelven JSON que se usará para representar la página. Next.js se encargará automáticamente de todo este trabajo. Podría usarse para llamar a un CMS, una base de datos u otras API directamente desde getServerSideProps. Se utiliza para implementar la representación del lado del servidor.

Propiedades de getServerSideProps:

1. Se ejecuta en cada solicitud posterior en el modo de desarrollo y producción.
2. Su código está excluido del paquete del lado del cliente.
3. Solo se puede exportar desde un archivo de página.

Cuándo usar qué método de obtención de datos: si el contenido de su página es estático o no cambia con frecuencia, entonces debe optar por getStaticProps, ya que crea páginas en el tiempo de creación, lo que aumenta el rendimiento. Si su página tiene rutas dinámicas, debe usar getStaticPaths junto con getStaticProps.

Pero si su sitio web contiene una página cuyos datos cambian con mucha frecuencia, debe usar getServerSideProps, ya que obtiene datos nuevos en cada solicitud.

Ejemplo: construiremos una aplicación Next Js simple con tres páginas de álbumes, publicaciones y una página de usuarios con rutas dinámicas. Las tres páginas implementarán diferentes métodos de obtención de datos. Para este ejemplo, usaremos la API JSONPlaceholder para obtener datos aleatorios.

Ejecute el siguiente comando para crear una nueva aplicación Next Js (asegúrese de tener instalado NPM y el Node):  

npx create-next-app@latest myproject

Cuando abrimos nuestro proyecto en un editor de código, vemos una estructura de proyecto sencilla. Para el alcance de este tutorial, solo nos centraremos en el directorio /pages. Primero limpiaremos el archivo /pages/index.js. Luego crearemos dos nuevas páginas de álbumes, publicaciones y una página de rutas dinámicas /usuarios/[id].

Estructura del proyecto: 

 

/pages/index.js: primero limpiaremos la página de inicio (índice), eliminaremos todo el código repetitivo y agregaremos enlaces a todas las páginas que implementaremos para facilitar la navegación.

import React from 'react'
import Link from 'next/link'
const Home = () => {
 
    // This is the home page which will
    // contain links to all other pages
    return (
        <>
            <h1>Hello Geeks</h1>
            <ul>
                <li>
                    getStaticProps :
                    <Link href={'/about'}>About Page</Link>
                </li>
                <li>
                    getStaticPaths :
                    <Link href={'/users/1'}>User 1</Link>
                </li>
                <li>
                    getServerSideProps :
                    <Link href={'/posts'}>Posts Page</Link>
                </li>
            </ul>
        </>
    )
}
 
export default Home

/pages/albums.jsx: la página de álbumes implementará la generación de sitios estáticos mediante getStaticProps , exportaremos el método de obtención de datos junto con el componente de la página. Podemos enviar datos obtenidos al componente de la página usando accesorios. Next Js buscará todos los álbumes en el momento de la compilación antes de la solicitud del usuario.

import React from 'react'
 
export const getStaticProps = async () => {
 
    // Fetching data from jsonplaceholder.
    const res = await fetch(
        'https://jsonplaceholder.typicode.com/albums');
    let allAlbums = await res.json();
 
    // Sending fetched data to the page component via props.
    return {
        props: {
            allAlbums: allAlbums.map((album) => album.title)
        }
    }
}
 
const Albums = ({ allAlbums }) => {
    return (
        <div>
            <h1>All Albums</h1>
            {allAlbums.map((album, idx) => (
                <div key={idx}>{album}</div>))
            }
        </div>
    )
}
 
export default Albums

/pages/posts.jsx: la página de publicaciones implementará la representación del lado del servidor utilizando getServerSideProps . Obtendrá los datos de las publicaciones y la página de creación en cada solicitud realizada por el usuario, y enviará los datos obtenidos al componente utilizando accesorios.

import React from 'react'
 
export const getServerSideProps = async (ctx) => {
 
    // ctx is the context object which contains the request,
    // response and props passed to the page.
 
    // fetching data from jsonplaceholder.
    const res = await fetch(
        'https://jsonplaceholder.typicode.com/posts');
    let allPosts = await res.json();
 
    // Sending fetched data to the page component via props.
    return {
        props: {
            allPosts: allPosts.map((post) => post.title)
        }
    }
}
 
const Posts = ({ allPosts }) => {
    return (
        <div>
            <h1>All Posts</h1>
            {allPosts.map((post, idx) => (
                <div key={idx}>{post}</div>))}
        </div>
    )
}
 
export default Posts

/pages/users/[id].jsx: debido a que esta es una página dinámica, debemos predefinir todos los ID de usuario para que Next Js pueda recuperar sus datos en el momento de la compilación. Como resultado, usamos getStaticPaths y definimos diez ID de usuario.

import React from "react";
 
export const getStaticProps = async (ctx) => {
 
    // ctx will contain request parameters
    const { params } = ctx;
     
    // We will destructure id from the parameters
    const userId = params.id;
     
    // Fetching user data
    const res = await fetch(
        `https://jsonplaceholder.typicode.com/users/${userId}`
    );
    const userData = await res.json();
 
    // Sending data to the page via props
    return {
        props: {
            user: userData,
        },
    };
};
 
export const getStaticPaths = () => {
     
    // Specifying all the routes to be
    // pre-rendered by next js
    return {
        paths: [
            { params: { id: "1" } },
            { params: { id: "2" } },
            { params: { id: "3" } },
            { params: { id: "4" } },
            { params: { id: "5" } },
            { params: { id: "6" } },
            { params: { id: "7" } },
            { params: { id: "8" } },
            { params: { id: "9" } },
            { params: { id: "10" } },
        ],
        fallback: false,
    };
};
 
const User = ({ user }) => {
    return (
        <>
            <h1>User {user.id}</h1>
            <h2>Name : {user.name}</h2>
            <h2>Email : {user.email}</h2>
        </>
    );
};
 
export default User;

Ejecute la aplicación: abra la terminal e ingrese el siguiente comando.

npm run dev

Producción: