Que sont les fonctions Edge dans Next.js? 5 façons de les utiliser

Next.js est un framework open source populaire pour le développement d'applications React rendues côté serveur. Grâce à sa facilité d'utilisation et son adaptabilité, vous pouvez l'utiliser pour créer des applications Web complexes.

Les fonctions Edge sont l'une des fonctionnalités les plus intéressantes de Next.js. Découvrez les fonctions Edge et cinq façons de les utiliser dans Next.js.

Que sont les fonctions Edge?

La puissante fonctionnalité de fonctions Edge de Next.js vous permet d'exécuter des fonctions personnalisées sans serveur plus près de l'utilisateur final sur le réseau Edge. Cela implique que le code s'exécute sur des serveurs situés géographiquement plus proches du client, ce qui accélère et améliore les performances des applications Web.

Les fonctions Edge peuvent modifier la demande ou la réponse, récupérer des données, s'authentifier, etc.

Les fonctions Edge s'exécutent instantanément. Puisqu'elles réduisent le temps nécessaire au chargement des données et au rendu des pages, vous pouvez utiliser les fonctions Edge pour améliorer les performances Web et l'expérience utilisateur.

Les gadgets modernes et de nouvelle génération ont besoin informatique de pointe car il est plus fiable et sécurisé que Cloud computing et exploite les fonctions Edge. De plus, il est plus performant et flexible que le calcul seul sur l'appareil.

Voici quelques façons d'utiliser les fonctions Edge dans Next.js.

1. Routage dynamique

L'une des façons d'utiliser les fonctions Edge dans Next.js consiste à utiliser le routage dynamique. Vous pouvez définir et gérer des routes personnalisées basées sur des données dynamiques, telles que des paramètres de requête ou des en-têtes de requête.

Ceci est précieux pour créer des applications Web plus adaptables et dynamiques qui traitent diverses demandes.

Vous pouvez utiliser les fonctions Edge de Next.js pour implémenter le routage dynamique de la manière suivante :

// pages/api/[slug].js
exporterdéfautfonctiongestionnaire(demande, résolution) {
constante { slug } = req.query ;
si (limace 'à propos de') {
 res.statut(200).envoyer('Ceci est la page à propos!');
 } autresi (limace 'contact') {
 res.statut(200).envoyer('Ceci est la page de contact!');
 } autre {
 res.statut(404).envoyer('Page non trouvée.');
 }
}

Cet exemple montre le contenu d'un fichier nommé [slug.js] dans le pages/API répertoire pour définir une route personnalisée avec des données dynamiques. La limite de slug est ensuite supprimée de la requête de requête à l'aide de req.query, qui permet de faire face à des demandes puissamment fondées sur la valeur de limace.

Par exemple, si un utilisateur se rend sur http://example.com/api/about, le paramètre slug sera réglé sur à propos. Le gestionnaire exécutera le bloc de code approprié et affichera le message "Ceci est la page à propos!"

Si le client visite http://example.com/api/contact, gestionnaire renverra le message "Ceci est la page de contact!"

En utilisant les fonctions Edge pour le routage dynamique, les développeurs peuvent créer des applications Web plus adaptables et dynamiques capables de gérer diverses demandes en fonction de l'évolution des données.

2. Récupération de données

Dans Next.js, un cas d'utilisation courant des fonctions Edge est la récupération de données. Vous pouvez réduire la charge sur le serveur et augmenter les performances de l'application Web en amenant les données à la périphérie.

Les fonctions Edge de Next.js peuvent effectuer une récupération de données, comme illustré dans cet exemple :

// pages/api/utilisateurs/[id].js
exporterdéfautasynchronefonctiongestionnaire(demande, résolution) {
constante { id } = req.query ;
// Récupérer les données utilisateur d'une API tierce
constante réponse = attendre aller chercher(` https://api.example.com/users/${id}`);
constante utilisateur = attendre réponse.json();
// Retourne les données de l'utilisateur
 res.statut(200).json (utilisateur);
}

Cet exemple définit un point de terminaison d'API qui utilise le identifiant paramètre de requête pour récupérer les données utilisateur à partir d'une API tierce. En utilisant le aller chercher, vous pouvez envoyer une requête à l'API, puis attendre une réponse avec le mot clé await.

Le code extrait ensuite les informations JSON en appelant réponse.json() et le stocke dans une variable. Enfin, il utilise la json méthode de la réponse pour formater les données de réponse au format JSON.

La récupération des données de la fonction Edge est une technique puissante qui vous permet de récupérer des données à la périphérie, de réduire la charge du serveur et d'améliorer les performances des applications Web.

Vous pouvez également réduire l'inactivité de la demande et donner aux clients des pages plus rapides et plus réactives en obtenant des informations à partir d'une interface de programmation externe à la périphérie.

3. Utilisé dans l'authentification

En mettant en œuvre des règles de contrôle d'accès à la périphérie, vous pouvez améliorer la sécurité de votre application Web et réduire le risque d'accès non autorisé aux données sensibles.

Par exemple, considérons une fonction qui vérifie l'état d'authentification d'un client et le renvoie dans la réponse. Voici un aperçu de la vérification impliquant les fonctionnalités Edge dans Next.js :

// pages/api/auth.js
exporterdéfaut (req, res) => {
constante { isAuthenticated } = req.cookies ;
si (est authentifié) {
 res.statut(200).json({ message: 'Vous êtes authentifié' });
 } autre {
 res.statut(401).json({ message: 'Vous n'êtes pas authentifié' });
 }
}

Dans cette illustration, la fonction Edge examine le cookie pour un jeton d'authentification et, s'il est trouvé, génère une réponse JSON avec les informations de l'utilisateur.

4. Le test A/B

Une autre façon d'utiliser les fonctions Edge de Next.js consiste à optimiser les performances d'une application Web à l'aide de tests A/B. Vous pouvez comparer différentes versions d'un site Web ou d'une application à l'aide de tests A/B pour déterminer celle qui fonctionne le mieux.

Une illustration de la façon dont les fonctions Edge de Next.js peuvent être utilisées pour effectuer des tests A/B est la suivante :

// pages/api/abtest.js
constante variantes = ['varianteA', 'varianteB'];
exporterdéfautfonctiongestionnaire(demande, résolution) {
constante { userId } = req.query ;
// Génère une variante aléatoire pour l'utilisateur
constante index_variante = Mathématiques.sol(Mathématiques.random() * variants.length);
constante variant = variants[variantIndex] ;
// Stocke la variante dans un cookie
 res.setHeader('Set-Cookie', `variante=${variante}; Max-Age=604800;`);
// Affiche la variante correspondante
si (une variante 'varianteA') {
 res.statut(200).envoyer('Bienvenue dans la variante A !');
 } autre {
 res.statut(200).envoyer('Bienvenue dans la variante B !');
 }
}

Ce code illustre un point de terminaison d'interface API qui exécute un test A/B pour deux variantes uniques d'une page de site. Il utilise le Math.aléatoire() méthode pour créer une variante aléatoire pour l'utilisateur et la stocke dans un cookie avec le res.setHeader méthode. Cela permet au code de s'assurer que le client voit la même variation lors de visites futures.

Le code utilise alors le une variante la valeur du cookie pour afficher la variante appropriée. Il affiche un message indiquant la variante qu'il a sélectionnée.

À l'aide des fonctions Edge, les développeurs peuvent utiliser un outil puissant appelé test A/B pour comparer différentes versions d'une application ou d'une page Web afin de voir laquelle fonctionne le mieux. Vous pouvez collecter des données sur le comportement des utilisateurs et améliorer les performances et l'expérience utilisateur de l'application Web en attribuant de manière aléatoire des utilisateurs à différentes variantes.

5. Mise en cache des réponses

Le stockage de réaction est une autre façon d'utiliser les fonctionnalités Edge dans Next.js pour rationaliser l'exécution Web. Il permet de conserver les réactions pendant un certain temps pour réduire le nombre de requêtes adressées au serveur et travailler sur la rapidité de l'application web.

Voici une illustration de la façon dont vous pouvez effectuer un stockage de réaction avec Edge Capabilities dans Next.js :

// pages/api/data.js
constante données = { nom: 'John Doe', âge: 30 };
exporterdéfautfonctiongestionnaire(demande, résolution) {
// Définir les en-têtes de réponse pour activer la mise en cache
 res.setHeader('Cache-Control', 's-maxage=10, stale-while-revalidate');
// Retourne les données
 res.statut(200).json (données);
}

Cet exemple définit un point de terminaison d'API qui renvoie une réponse JSON avec certaines données.

Nous définissons les en-têtes de réaction à l'aide de res.setHeader technique permettant de réserver pendant 10 secondes à l'aide de la s-max-age frontière. Cela indique que le CDN peut mettre en cache la réponse jusqu'à dix secondes avant de demander une actualisation.

Nous utilisons également le obsolète pendant la revalidation pour laisser le CDN servir une réponse mise en cache qui a expiré pendant qu'une nouvelle réponse est faite en arrière-plan. Même si la réponse en cache a expiré, le CDN en générera une nouvelle et enverra toujours une réponse.

La mise en cache des réponses des fonctions Edge est un excellent moyen d'accélérer l'application Web et de réduire le nombre de requêtes adressées au serveur. Vous pouvez garantir aux utilisateurs des sites Web plus rapides et plus réactifs en mettant en cache les réponses pendant une durée prédéterminée.

Les fonctions Edge sont une fonctionnalité incroyablement puissante de Next.js

La prise en charge par Next.js des fonctions Edge est une fonctionnalité intéressante qui vous permet d'exécuter des fonctions personnalisées sans serveur plus près de l'utilisateur final sur le réseau Edge.

Il existe plusieurs façons d'utiliser les fonctions Edge pour améliorer les applications Web: test A/B, mise en cache des réponses, routage dynamique, récupération de données, authentification.

L'utilisation des fonctionnalités Edge dans votre architecture peut améliorer l'expérience de vos clients et se traduire par des applications Web plus rapides et plus réactives.