Cómo manejar la obtención de datos en Next.js
Next.js es un marco sólido que permite a los desarrolladores crear rápidamente aplicaciones React renderizadas del lado del servidor. Tiene varias características esenciales. Una de sus características clave es su capacidad para obtener datos fácilmente y ponerlos a disposición de los componentes.
La obtención de datos es una función esencial que permite a los desarrolladores recuperar y mostrar datos en un sitio web/aplicación web. Hay algunas formas diferentes de obtener datos en Next.js, cada una con sus ventajas y casos de uso. Este artículo explorará diferentes formas de obtener datos en Next.js.
Hacer uso del gancho useEffect para obtener datos
El gancho useEffect es un gancho React que se usa para realizar efectos secundarios, como llamadas API en componentes. Puede usar el enlace useEffect para obtener datos en Next.js.
Este gancho es útil para las páginas que necesitan datos dinámicos, como las páginas de perfil de usuario que muestran información particular del usuario que inició sesión.
Para usar el gancho useEffect, primero lo importa a su componente de elección, obtiene los datos y renderiza su página usándolo.
Por ejemplo:
import { useEffect, useState } from 'react';
export default function Home() {
const [data, setData] = useState("");
useEffect(() => {
fetch('https://api.example.com/data');
.then((response) => response.json())
.then((data) => setData(data))
}, []);
return (
<div>
{data.name}
</div>
)
}
Este bloque de código usa el enlace useEffect para obtener datos de una API. If pasa dos parámetros al gancho useEffect: una función para obtener los datos y una matriz de dependencia. Si tiene éxito, utiliza setData() para actualizar el estado del componente con los datos que devuelve la solicitud de recuperación.
La matriz de dependencias que pasa al enlace useEffect debe contener el valor del que depende el efecto. El componente volverá a ejecutar el efecto solo cuando cambie el valor en la matriz de dependencia. Si la matriz de dependencia está vacía, como en este ejemplo, el efecto solo se ejecutará en el primer renderizado.
Manejo de la revalidación automática mediante SWR
La biblioteca SWR (stale-while-revalidate) es una biblioteca de enlace de React para manejar la obtención de datos. Primero debe configurar la biblioteca SWR para usarla en su aplicación Next.
Una de las características clave de la biblioteca SWR es su capacidad para automatizar la revalidación de datos. Esta característica es esencial cuando los datos se actualizan con frecuencia y necesita que estén constantemente actualizados. Esta funcionalidad garantiza que su aplicación siempre tenga acceso a los datos más actualizados, lo que la hace más dinámica y receptiva para sus usuarios.
La biblioteca SWR realiza una nueva solicitud de recuperación a una API cuando un usuario vuelve a enfocarse en una página o cambia entre pestañas. Cuando un usuario abandona una página, los datos que se muestran en la pantalla se vuelven obsoletos. Cuando regresan a la página, la biblioteca SWR envía una nueva solicitud de búsqueda a la API y compara los datos nuevos con los datos obsoletos para determinar si ha cambiado.
Para evitar que la biblioteca SWR realice esta acción, puede usar la opción revalidateOnFocus .
Al igual que:
const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher, {
revalidateOnFocus: false,
})
Establecer la propiedad revalidateOnFocus en falso garantizará que la biblioteca SWR no vuelva a validar sus datos cada vez que vuelva a enfocarse en la página.
La biblioteca SWR también revalida los datos cada vez que un usuario se vuelve a conectar a Internet. Esta acción puede ser muy útil en ciertas situaciones y funciona automáticamente.
Para deshabilitar la acción, puede usar la opción revalidateOnReconnect :
const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher, {
revalidateOnReconnect: false,
})
Para deshabilitar la revalidación automática de sus datos, establezca las propiedades revalidateOnFocus y revalidateOnRecconect en falso.
Uso de la biblioteca Isomorphic-Unfetch para realizar solicitudes de recuperación
La biblioteca isomorphic-unfetch es una biblioteca pequeña y liviana que puede realizar solicitudes de búsqueda en una aplicación Next.js. La biblioteca es una excelente alternativa a la API de búsqueda nativa . Es fácil de usar, lo que lo hace perfecto para los desarrolladores nuevos en la realización de solicitudes de búsqueda.
Puede usar isomorphic-unfetch como polyfill para navegadores más antiguos que no son compatibles con la API de búsqueda nativa. La biblioteca isomorphic-unfetch es minimalista y adecuada para trabajar en aplicaciones pequeñas.
Para usar isomorphic-unfetch en una aplicación Next.js, instale la biblioteca ejecutando el siguiente comando:
npm install isomorphic-unfetch
Luego puede importar la biblioteca y usarla en su componente para obtener datos, así:
import Fetch from 'isomorphic-unfetch'
import {useState, useEffect} from 'react'
export default function Home() {
const [data, setData] = useState(null)
useEffect(() => {
Fetch('https://api.example.com/data')
.then((response) => response.json)
.then((data) => setData(data))
}, [])
if (!data) return <div>Loading...</div>
return (
<div>
<h1>{data.name}</h1>
</div>
)
}
La función isomorphic-unfetch funciona tanto en el lado del cliente como en el lado del servidor.
Obtención eficiente de datos con Next.js
La obtención de datos es una característica importante al desarrollar aplicaciones. Next.js proporciona varias formas de obtener datos, cada una de las cuales tiene sus ventajas y desventajas.
Al decidir qué método utilizar, tenga en cuenta las ventajas y desventajas y asegúrese de utilizar una técnica con la que se sienta cómodo.
Deja una respuesta