Récupération dynamique des données dans une application Next.js authentifiée

Next.js propose cinq types de modèles de récupération de données pour déterminer comment vous souhaitez que le contenu soit vu dans votre application : génération de site statique (SSG), rendu côté serveur (SSR), rendu côté client (CSR), statique incrémentielle régénération (ISR) et routage dynamique.

Vous pouvez choisir celui de ces modèles qui convient à la structure de votre application. Pour en savoir plus sur ces modèles, lisez-les dans ledocuments officiels.

Cet article se concentre sur la génération de sites statiques et le routage dynamique. L'utilisation de ces modèles nécessite l'utilisation de lagetStaticPropsetgetStaticPaths méthodes de récupération de données. Ces méthodes jouent un rôle unique dans l'obtention de données.

Nous parlons de données dynamiques depuis un moment maintenant. Comprenons ce que cela signifie vraiment.

Supposons que nous ayons une liste d'utilisateurs dans une application rendue sur une page Web et que nous souhaitions obtenir des informations uniques à un utilisateur lorsque nous cliquons sur son nom – les informations que nous obtenons changeraient en fonction de l'action que nous effectuons (cliquer sur le nom de l'utilisateur).

Nous voulons un moyen de rendre ces données sur une page (ou un écran) unique dans l'application, et legetStaticPaths La méthode de récupération de données nous permet d'obtenir des données uniques à un utilisateur. Ceci est généralement courant dans un tableau d'objets utilisateur avec une clé unique (identifiantou alors_identifiant), en fonction de la structure de l'objet de réponse.

exporter la fonction asynchrone getStaticPaths() { return { chemins : {[{
        params: {
          uniqueId: id.toString()
        }
      }]repli : faux } } }

La clé unique obtenue à partir dugetStaticPathsLa méthode (communément appelée paramètre ou params en abrégé) est transmise en tant qu'argument via lele contexteparamètre dansgetStaticProps.

Cela nous ramène au fait quegetStaticPathsne peut pas fonctionner sansgetStaticProps . Les deux fonctionnent ensemble, car vous devrez passer l'uniqueidentifiantdu chemin généré statiquement comme argument dule contexteparamètre dansgetStaticProps . L'extrait de code ci-dessous illustre cela :

exporter la fonction asynchrone getStaticProps(context) { return { props: { userData: data, }, } }

Les inconvénients de l'utilisation des méthodes natives de récupération de données de Next.js

Maintenant que nous comprenons un peu la récupération dynamique des données dans Next.js, examinons les inconvénients de l'utilisation des deux méthodes de récupération de données susmentionnées.

L'obtention de données à partir d'une API publique qui ne nécessite aucune autorisation avec une sorte de clé API lors de la récupération des données peut être effectuée avecgetStaticPropsetgetStaticPaths.

Jetez un œil aux deux ci-dessous :

 // getStaticPaths export async function getStaticPaths() { const response = fetch("https://jsonplaceholder.typicode.com/users") const userData = await response.json() // Obtention de la clé unique de l'utilisateur à partir de la réponse // avec la méthode map de JavaScript.  const uniqueId = userData.map((data) => { return data.id }) return { paths: {[{
        params: {
          uniqueId: uniqueId.toString()
        }
      }]repli : faux } } }

Vous remarquerez que l'uniqueidentifiantest obtenu de lacarteméthode de JavaScript, et nous allons lui attribuer une valeur via lale contexteparamètre degetStaticProps.

 export async function getStaticProps(context) { // Obtient l'identifiant unique de l'utilisateur.  const userId = context.params.uniqueId // Ajoute l'ID en tant que paramètre au point de terminaison de l'API.  réponse const = fetch(`https://jsonplaceholder.typicode.com/users/${userId}`) const userData = attendre réponse.json() return { props: { userData, }, } }

Dans l'extrait ci-dessus, vous verrez qu'une variable nomméeidentifiant d'utilisateura été initialisé, et sa valeur a été obtenue à partir dule contexteparamètre.

Cette valeur est ensuite ajoutée en tant que paramètre à l'URL de base de l'API.

Noter:LegetStaticPropsetgetStaticPathsles méthodes de récupération de données ne peuvent être exportées qu'à partir d'un fichier danspagesdossier de Next.js.

Cela le fait à peu près pour une API publique. Mais lorsque vous créez une application qui nécessite que l'utilisateur se connecte, se déconnecte et peut-être effectue une récupération de données dans l'application lorsqu'il se connecte avec son compte, le flux d'application est différent.

Récupération de données dans un système authentifié.

Le flux d'obtention de données dans un système authentifié est assez différent de la manière normale dont nous obtenons des données à partir d'une API publique.

Imaginez ce scénario : un utilisateur se connecte à une application Web, puis visite son profil. Sur leur page de profil (une fois rendue), ils peuvent voir et modifier les informations qu'ils ont fournies lors de leur inscription.

Pour que cela se produise, il doit y avoir une sorte de vérification des données qui sont envoyées à l'utilisateur par le développeur qui a construit l'interface. Heureusement, il existe un modèle courant pour autoriser un utilisateur lorsqu'il se connecte à un système : les jetons Web JSON (JWT).

Lorsqu'un utilisateur s'inscrit pour utiliser votre application pour la première fois, ses détails sont stockés dans la base de données et un JWT unique est attribué au schéma de cet utilisateur (en fonction de la conception de l'API principale).

Lorsque l'utilisateur essaie de se connecter à votre application et que ses informations d'identification correspondent à celles avec lesquelles il s'est initialement inscrit, la prochaine chose que nos ingénieurs frontaux doivent faire est de fournir un état d'authentification à l'utilisateur, afin que nous puissions obtenir les détails requis, dont l'un est le JWT.

Il existe différentes écoles de pensée sur la manière de préserver les droits d'un utilisateur.auth-statey compris l'utilisation de Redux, Composition in React et l'API Context de React (je recommanderais l'API Context).L'article d'Attila Fassinapasse en revue les paradigmes de gestion d'état dans Next.js.

L'approche courante consiste à stocker le JWT dansstockage local — pour commencer au moins, si nous considérons la question de la sécurité de manière stricte. Stocker votre JWT dans unhttpUniquementcookie est conseillé, pour empêcher les attaques de sécurité telles que la falsification de requête intersite (CSRF) et le script intersite (XSS).

Encore une fois, cette approche n'est possible que si le middleware cookie approprié est fourni dans l'API que les ingénieurs back-end ont construit.

Si vous ne voulez pas vous embêter à comprendre comment les ingénieurs back-end ont conçu une API, une alternative à l'authentification dans Next.js consiste à utiliser le projet d'authentification open source NextAuth.js.

Une fois le jeton inséréstockage localcôté client, les appels d'API qui nécessitent le jeton d'utilisateur comme moyen d'autorisation peuvent passer sans générer d'erreur 501 (non autorisé).

en-têtes : { "x-auth-token": localStorage.getItem("token") }

Récupération de données avec leutiliserRouterCrochet

Dans la première section, nous avons vu comment le processus de récupération dynamique des données fonctionne dans Next.js pour une application qui ne nécessite pas d'authentification.

Dans cette section, nous verrons comment contourner le problème dugetStaticPropsetgetStaticPathsméthodes de récupération de données lançant unreferenceError("stockage localn'est pas défini") lorsque nous essayons d'obtenir le jeton de l'utilisateur à partir destockage local.

Cette erreur se produit car les deux méthodes de récupération de données s'exécutent toujours sur le serveur en arrière-plan, ce qui, à son tour, rend lestockage localobjet indisponible pour eux, car il se trouve côté client (dans le navigateur).

L'API de routeur de Next.js crée de nombreuses possibilités lorsque nous traitons des routes et des données dynamiques. Avec leutiliserRoutercrochet, nous devrions être en mesure d'obtenir des données uniques à un utilisateur en fonction de son identifiant unique.

Regardons l'extrait ci-dessous pour commencer :

 // pages/index.js importent React depuis "react" ;  importer des axios depuis "axios" ;  import { userEndpoints } de "../../../routes/endpoints" ;  importer le lien depuis "suivant/lien" ;  const Utilisateurs = () => { const[data, setData]= React.useState([]) const[loading, setLoading] = React.useState(false) const getAllUsers = async () => { try { setLoading(true);  réponse const = attendre axios({ méthode : "GET", url : userEndpoints.getUsers, en-têtes : { "x-auth-token": localStorage.getItem("token"), "Content-Type": "application/json" , }, });  const { données } = réponse.données ;  setData(données);  } catch (erreur) { setLoading(false);  console.log (erreur);  } } ;  retourner (
      
Liste des utilisateurs
{data.map((utilisateur) => { return (
              

                
{Nom d'utilisateur}
                
{rôle d'utilisateur}
              
  
            
           );  })} );  } ;  exporter les utilisateurs par défaut ;

Dans l'extrait ci-dessus, nous avons utilisé leutiliserEffet crochet pour obtenir les données une fois la page rendue pour la première fois. Vous remarquerez également que le JWT est attribué aux-auth-tokenclé dans l'en-tête de la requête.

Lorsque nous cliquons sur un utilisateur, leLien nous dirigera vers une nouvelle page basée sur l'identifiant unique de l'utilisateur. Une fois que nous sommes sur cette page, nous voulons rendre les informations qui sont spécifiquement disponibles pour cet utilisateur avec leidentifiant.

LeutiliserRoutercrochet nous donne accès à lachemin d'accès dans l'onglet URL du navigateur. Avec cela en place, nous pouvons obtenir le paramètre de requête de cette route unique, qui est leidentifiant.

L'extrait ci-dessous illustre l'ensemble du processus :

//[id] .js importe React depuis "react" ;  importer la tête de "next/head" ;  importer des axios depuis "axios" ;  import { userEndpoints } de "../../../routes/endpoints" ;  import { useRouter } de "next/router" ;  const UniqueUser = () => { const[user, setUser] = React.useState({ fullName : "", email : "", rôle : "", } );  constante[loading, setLoading] = React.useState(faux);  const { requête } = useRouter();  // Obtention de l'identifiant unique de l'utilisateur avec Next.js' // crochet useRouter.  const currentUserId = requête.id ;  const getUniqueUser = async () => { essayer { setLoading(true);  réponse const = attendre axios({ méthode : "GET", url : `${userEndpoints.getUsers}/${currentUserId}`, en-têtes : { "Content-Type": "application/json", "x-auth-token" ": localStorage.getItem("jeton"), }, });  const { données } = réponse.données ;  setUser(données);  } catch (erreur) { setLoading(false);  console.log (erreur);  } } ;  React.useEffect(() => { getUniqueUser(); },[] );  retourner (
      
        
      
        

          

            

              
{user.fullName}
              
{rôle d'utilisateur}
              
{user.email}
            
          
        
      )} );  } ;  exporter UniqueUser par défaut ;

Dans l'extrait ci-dessus, vous verrez que nous avons déstructuré l'objet de requête duutiliserRouterhook, que nous utiliserons pour obtenir l'ID unique de l'utilisateur et le transmettre en tant qu'argument au point de terminaison de l'API.

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

Une fois l'ID unique ajouté au point de terminaison de l'API, les données destinées à cet utilisateur seront rendues une fois la page chargée.

Conclusion

La récupération de données dans Next.js peut devenir compliquée si vous ne comprenez pas parfaitement le cas d'utilisation de votre application.

J'espère que cet article vous a aidé à comprendre comment utiliser l'API du routeur de Next.js pour obtenir des données dynamiques dans vos applications.

(vf, yk, il, al)