Next.js es un marco sólido que permite a los desarrolladores crear rápidamente aplicaciones React renderizadas en el 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 efecto de uso gancho es un Gancho de reacción utilizado 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:

importar { usarEfecto, usarEstado } de'reaccionar';
exportarpor defectofunciónHogar() {
constante [datos, establecerDatos] = usarEstado("");
 usarEfecto(() => {
 buscar(' https://api.example.com/data');
 .entonces( (respuesta) => respuesta.json() )
 .entonces( (datos) => setData (datos) )
 }, []); 
devolver (


 {datos.nombre}
 </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. En caso de éxito, utiliza establecerDatos() 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

El ROE (stale-while-revalidate) es una biblioteca de enlace de React para manejar la obtención de datos. Usted debe configurar la biblioteca SWR primero, para usarlo 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 el revalidarOnFocus opción.

Al igual que:

constante { datos, error, se está cargando } = useSWR(' https://api.example.com/data', buscador, {
 revalidarEnFocus: FALSO,
})

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 el revalidar al volver a conectar opción:

constante { datos, error, se está cargando } = useSWR(' https://api.example.com/data', buscador, {
 revalidar al volver a conectar: FALSO,
})

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

El isomorphic-unfetch library es una biblioteca pequeña y liviana que puede realizar solicitudes de recuperación en una aplicación Next.js. La biblioteca es una excelente alternativa a la nativa. buscar API. 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í:

importar Buscar de'isomorphic-unfetch'
importar {usarEstado, usarEfecto} de'reaccionar'
exportarpor defectofunciónHogar() {
constante [datos, establecerDatos] = usarEstado(nulo)
 usarEfecto(() => {
 Buscar(' https://api.example.com/data')
 .entonces( (respuesta) => respuesta.json)
 .entonces( (datos) => setData (datos) )
 }, [])

si (!datos) devolver<división>Cargando...división>
devolver (


{datos.nombre}</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.