Obtención dinámica de datos en una aplicación Next.js autenticada

 

 

 

  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX
  • ¡Registro!

  • Índice
    1. Las desventajas de utilizar los métodos nativos de obtención de datos de Next.js
    2. Obteniendo datos en un sistema autenticado.
    3. Obtención de datos con el useRoutergancho
    4. Conclusión

    Los datos se encuentran entre las cosas más importantes que componen una aplicación web o una aplicación nativa convencional. Necesitamos datos para poder ver y quizás comprender el propósito de una aplicación. En este artículo, veremos otro método para obtener datos en una aplicación que requiere autenticación o autorización utilizando Next.js.

     

    Next.js tiene cinco tipos de patrones de obtención de datos para determinar cómo desea que se vea el contenido en su aplicación: generación de sitio estático (SSG), representación del lado del servidor (SSR), representación del lado del cliente (CSR), estática incremental. regeneración (ISR) y enrutamiento dinámico.

    Puede elegir cuál de estos patrones se adapta a la estructura de su aplicación. Para obtener más información sobre estos patrones, lea sobre ellos en la documentación oficial .

    Este artículo se centra en la generación de sitios estáticos y el enrutamiento dinámico. El uso de estos patrones requiere el uso de métodos de obtención de getStaticPropsdatos getStaticPaths. Estos métodos desempeñan funciones únicas en la obtención de datos.

    Llevamos un tiempo hablando de datos dinámicos. Entendamos lo que eso realmente significa.

    Digamos que tenemos una lista de usuarios en una aplicación que se representa en una página web y queremos obtener información exclusiva de un usuario cuando hacemos clic en su nombre; la información que obtenemos cambiará según la acción que realicemos (hacer clic en el nombre del usuario).

    Queremos una forma de representar esos datos en una página (o pantalla) única en la aplicación, y el getStaticPathsmétodo de obtención de datos nos permite obtener datos que son exclusivos de un usuario. Esto suele ser común en una matriz de objetos de usuario con una clave única ( ido _id), dependiendo de cómo esté estructurado el objeto de respuesta.

    export async function getStaticPaths() { return { paths: { [{ params: { uniqueId: id.toString() } }], fallback: false } }}

    La clave única obtenida del getStaticPathsmétodo (comúnmente denominada parámetro, o params para abreviar) se pasa como argumento a través del contextparámetro en getStaticProps.

    Esto nos lleva de nuevo al hecho de que getStaticPathsno podemos trabajar sin él getStaticProps. Ambos funcionan juntos, porque necesitarás pasar el valor único idde la ruta generada estáticamente como argumento para el contextparámetro en getStaticProps. El siguiente fragmento de código ilustra esto:

     

    export async function getStaticProps(context) { return { props: { userData: data, }, }}

    Las desventajas de utilizar los métodos nativos de obtención de datos de Next.js

    Ahora que entendemos un poco acerca de la recuperación dinámica de datos en Next.js, veamos las desventajas de utilizar los dos métodos de recuperación de datos antes mencionados.

    Se pueden obtener datos de una API pública que no requiere autorización con algún tipo de clave API durante la recuperación de datos con getStaticPropsy getStaticPaths.

    Échales un vistazo a ambos a continuación:

    // getStaticPathsexport async function getStaticPaths() { const response = fetch("https://jsonplaceholder.typicode.com/users") const userData = await response.json() // Getting the unique key of the user from the response // with the map method of JavaScript. const uniqueId = userData.map((data) = { return data.id }) return { paths: { [{ params: { uniqueId: uniqueId.toString() } }], fallback: false } }}

    Notarás que el valor único idse obtiene del mapmétodo de JavaScript y lo asignaremos como un valor a través del contextparámetro de getStaticProps.

    export async function getStaticProps(context) { // Obtain the user’s unique ID. const userId = context.params.uniqueId // Append the ID as a parameter to the API endpoint. const response = fetch(`https://jsonplaceholder.typicode.com/users/${userId}`) const userData = await response.json() return { props: { userData, }, }}

    En el fragmento anterior, verá que userIdse inicializó una variable denominada y su valor se obtuvo del contextparámetro.

    Luego, ese valor se agrega como parámetro a la URL base de la API.

    Nota: Los métodos de obtención de datos getStaticPropsy getStaticPathssolo se pueden exportar desde un archivo en la pagescarpeta Next.js.

    Eso prácticamente es suficiente para una API pública. Pero cuando se crea una aplicación que requiere que el usuario inicie sesión, cierre sesión y tal vez realice alguna recuperación de datos en la aplicación cuando inicia sesión con su cuenta, el flujo de la aplicación es diferente.

    Obteniendo datos en un sistema autenticado.

    El flujo de obtención de datos en un sistema autenticado es bastante diferente de la forma normal en que obtenemos datos de una API pública.

     

    Imagine este escenario: un usuario inicia sesión en una aplicación web y luego visita su perfil. En su página de perfil (una vez renderizada), pueden ver y modificar la información que proporcionaron al registrarse.

    Para que esto suceda, tiene que haber algún tipo de verificación de los datos que el desarrollador que creó la interfaz envía al usuario. Afortunadamente, existe un patrón común para autorizar a un usuario cuando inicia sesión en un sistema: JSON Web Tokens (JWT).

    Cuando un usuario se registra para usar su aplicación por primera vez, sus detalles se almacenan en la base de datos y se asigna un JWT único al esquema de ese usuario (dependiendo de cómo se haya diseñado la API de back-end).

    Cuando el usuario intenta iniciar sesión en su aplicación y sus credenciales coinciden con las que se registraron originalmente, lo siguiente que tenemos que hacer los ingenieros de front-end es proporcionar un estado de autenticación para el usuario, de modo que podamos obtener los detalles requeridos. uno de los cuales es el JWT. Blog sobre música Rock

    Existen diferentes escuelas de pensamiento sobre cómo preservar el contenido de un usuario auth-state, incluido el uso de Redux, Composition en React y la API de contexto de React (recomiendo la API de contexto). El artículo de Átila Fassina analiza los paradigmas de gestión estatal en Next.js.

    El enfoque común es almacenar el JWT localStorage, al menos para empezar, si consideramos el tema de la seguridad de manera estricta. Es recomendable almacenar su JWT en una httpOnlycookie para evitar ataques de seguridad como la falsificación de solicitudes entre sitios (CSRF) y secuencias de comandos entre sitios (XSS).

    Una vez más, este enfoque sólo puede ser posible si se proporciona el middleware de cookies adecuado en la API que han creado los ingenieros de back-end.

    Si no quiere pasar por la molestia de descubrir cómo los ingenieros de back-end han diseñado una API, una ruta alternativa a la autenticación en Next.js es utilizar el proyecto de autenticación de código abierto NextAuth.js.

    Una vez que el token está en localStorageel lado del cliente, las llamadas API que requieren el token de usuario como medio de autorización pueden realizarse sin generar un error 501 (no autorizado).

    headers: { "x-auth-token": localStorage.getItem("token")}

    Obtención de datos con el useRoutergancho

    En la primera sección, vimos cómo funciona el proceso de obtención dinámica de datos en Next.js para una aplicación que no requiere autenticación.

    En esta sección, veremos cómo evitar el problema de los getStaticPropsmétodos getStaticPathsde obtención de datos que arrojan un referenceError(“ localStorageno está definido”) cuando intentamos obtener el token del usuario de localStorage.

    Este error se produce porque los dos métodos de obtención de datos siempre se ejecutan en el servidor en segundo plano, lo que, a su vez, hace que el localStorageobjeto no esté disponible para ellos porque está en el lado del cliente (en el navegador).

    La API del enrutador de Next.js crea muchas posibilidades cuando tratamos con rutas y datos dinámicos. Con el useRoutergancho, deberíamos poder obtener datos exclusivos de un usuario en función de su ID única.

     

    Veamos el fragmento a continuación para comenzar:

    // pages/index.jsimport React from "react";import axios from "axios";import { userEndpoints } from "../../../routes/endpoints";import Link from "next/link";const Users = () = { const [data, setData] = React.useState([]) const [loading, setLoading] = React.useState(false) const getAllUsers = async () = { try { setLoading(true); const response = await axios({ method: "GET", url: userEndpoints.getUsers, headers: { "x-auth-token": localStorage.getItem("token"), "Content-Type": "application/json", }, }); const { data } = response.data; setData(data); } catch (error) { setLoading(false); console.log(error); } }; return ( React.Fragment pUsers list/p {data.map((user) = { return ( Link href={`/${user._id}`} key={user._id} div className="user" p className="fullname"{user.name}/p p className="position"{user.role}/p /div /Link ); })} /React.Fragment );};export default Users;

    En el fragmento anterior, utilizamos el useEffectenlace para obtener los datos una vez que la página se representa por primera vez. También notarás que el JWT está asignado a la x-auth-tokenclave en el encabezado de la solicitud.

    Cuando hacemos clic en un usuario, el Linkcomponente nos dirigirá a una nueva página basada en la identificación única del usuario. Una vez que estemos en esa página, queremos mostrar la información que está específicamente disponible para ese usuario con el archivo id.

    El useRoutergancho nos da acceso a la pathnamepestaña URL del navegador. Una vez implementado esto, podemos obtener el parámetro de consulta de esa ruta única, que es el archivo id.

    El siguiente fragmento ilustra todo el proceso:

    // [id].jsimport React from "react";import Head from "next/head";import axios from "axios";import { userEndpoints } from "../../../routes/endpoints";import { useRouter } from "next/router";const UniqueUser = () = { const [user, setUser] = React.useState({ fullName: "", email: "", role: "", }); const [loading, setLoading] = React.useState(false); const { query } = useRouter(); // Obtaining the user’s unique ID with Next.js' // useRouter hook. const currentUserId = query.id; const getUniqueUser = async () = { try { setLoading(true); const response = await axios({ method: "GET", url: `${userEndpoints.getUsers}/${currentUserId}`, headers: { "Content-Type": "application/json", "x-auth-token": localStorage.getItem("token"), }, }); const { data } = response.data; setUser(data); } catch (error) { setLoading(false); console.log(error); } }; React.useEffect(() = { getUniqueUser(); }, []); return ( React.Fragment Head title {`${user.fullName}'s Profile | "Profile" `} /title /Head div div className="user-info" div className="user-details" p className="fullname"{user.fullName}/p p className="role"{user.role}/p p className="email"{user.email}/p /div /div /div )} /React.Fragment );};export default UniqueUser;

    En el fragmento anterior, verá que hemos desestructurado el objeto de consulta del useRouterenlace, que usaremos para obtener la identificación única del usuario y pasarla como argumento al punto final de la API.

    const {query} = useRouter()const userId = query.id

    Una vez que se agrega la ID única al punto final de la API, los datos destinados a ese usuario se representarán una vez que se cargue la página.

    Conclusión

    La obtención de datos en Next.js puede resultar complicada si no comprende completamente el caso de uso de su aplicación.

    Espero que este artículo le haya ayudado a comprender cómo utilizar la API del enrutador de Next.js para obtener datos dinámicos en sus aplicaciones.

    (vf, yk, il, al)Explora más en

    • Siguiente.js
    • javascript
    • Aplicaciones





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Obtención dinámica de datos en una aplicación Next.js autenticada

    Obtención dinámica de datos en una aplicación Next.js autenticada

    Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX ¡Registro! Índice Las desv

    programar

    es

    https://aprendeprogramando.es/static/images/programar-obtencion-dinamica-de-datos-en-una-aplicacion-next-1136-0.jpg

    2024-04-04

     

    Obtención dinámica de datos en una aplicación Next.js autenticada
    Obtención dinámica de datos en una aplicación Next.js autenticada

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20