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é Edge functions de Next.js vous permet d’exécuter des fonctions serverless personnalisées plus près de l’utilisateur final sur le réseau edge. Cela implique que le code s’exécute sur des serveurs trouvés géographiquement plus proches du client, apportant plus de rapidité et de performance dans les 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. Comme elles réduisent le temps de chargement des données et de 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 de l’informatique en périphérie parce qu’elle est plus fiable et plus sûre que l’informatique en nuage et qu’elle exploite les fonctions Edge. En outre, il est plus performant et plus flexible que l’informatique seule 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 est le routage dynamique. Vous pouvez définir et gérer des itinéraires personnalisés basés sur des données dynamiques, telles que des paramètres de requête ou des en-têtes de demande.
Cette fonction est très utile pour créer des applications web plus adaptables et plus dynamiques qui traitent différentes requêtes.
Vous pouvez utiliser les fonctions Edge de Next.js pour implémenter le routage dynamique de la manière suivante :
// pages/api/[slug].js
export default function handler(req, res) {
const { slug } = req.query;
if (slug === 'about') {
res.status(200).send('This is the about page!');
} else if (slug === 'contact') {
res.status(200).send('This is the contact page!');
} else {
res.status(404).send('Page not found.');
}
}
Cet exemple montre le contenu d’un fichier nommé [slug.js] dans la base de données pages/api pour définir une route personnalisée avec des données dynamiques. La limite de la balise est ensuite supprimée de la requête à l’aide de la commande req.queryqui vous permet de traiter des demandes puissamment fondées sur la valeur de l’élément limace.
Par exemple, si un utilisateur se rend sur http://example.com/api/about, le paramètre slug sera défini comme suit à propos de. Les gestionnaire exécutera le bloc de code approprié et affichera le message « This is the about page ! ».
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 plus dynamiques, capables de traiter diverses demandes basées sur des données changeantes.
2. Récupération de données
Dans Next.js, l’un des cas d’utilisation courants 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 récupérer des données, comme le montre cet exemple :
// pages/api/users/[id].js
export default async function handler(req, res) {
const { id } = req.query;
// Fetch user data from a third-party API
const response = await fetch(`https://api.example.com/users/${id}`);
const user = await response.json();
// Return the user data
res.status(200).json(user);
}
Cet exemple définit un point d’accès à l’API qui utilise la fonction id pour récupérer les données des utilisateurs à partir d’une API tierce. L’utilisation du paramètre de requête fetch vous pouvez envoyer une requête à l’API et attendre une réponse avec le mot-clé await.
Le code extrait ensuite les informations JSON en appelant response.json() et le stocke dans une variable. Enfin, il utilise la fonction json de la réponse pour formater les données de la réponse en JSON.
La récupération de données par la fonction Edge est une technique puissante qui vous permet de récupérer des données à la périphérie, réduisant ainsi la charge du serveur et améliorant les performances de l’application web.
Vous pouvez également réduire l’inactivité de la demande et offrir 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é pour l’authentification
En mettant en place 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é à des données sensibles.
Prenons l’exemple d’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 capacités Edge dans Next.js :
// pages/api/auth.js
export default (req, res) => {
const { isAuthenticated } = req.cookies;
if (isAuthenticated) {
res.status(200).json({ message: 'You are authenticated' });
} else {
res.status(401).json({ message: 'You are not authenticated' });
}
}
Dans cette illustration, la fonction Edge examine le cookie à la recherche d’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 est d’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 en utilisant le test A/B pour déterminer laquelle est la plus performante.
Voici une illustration de la façon dont les fonctions Edge de Next.js peuvent être utilisées pour effectuer des tests A/B :
// pages/api/abtest.js
const variants = ['variantA', 'variantB'];
export default function handler(req, res) {
const { userId } = req.query;
// Generate a random variant for the user
const variantIndex = Math.floor(Math.random() * variants.length);
const variant = variants[variantIndex];
// Store the variant in a cookie
res.setHeader('Set-Cookie', `variant=${variant}; Max-Age=604800;`);
// Render the corresponding variant
if (variant === 'variantA') {
res.status(200).send('Welcome to variant A!');
} else {
res.status(200).send('Welcome to variant B!');
}
}
Ce code démontre un point d’extrémité d’interface API qui exécute un test A/B pour deux variations uniques d’une page de site. Il utilise la fonction Math.random() pour créer une variante aléatoire pour l’utilisateur et la stocker dans un cookie avec l’attribut res.setHeader . Cela permet au code de s’assurer que le client verra la même variation lors de ses prochaines visites.
Le code utilise ensuite la méthode variante pour rendre la variante appropriée. Il affiche un message indiquant la variante sélectionnée.
Grâce aux 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 déterminer laquelle est la plus performante. Vous pouvez collecter des données sur le comportement des utilisateurs et améliorer les performances de l’application web et l’expérience utilisateur en affectant de manière aléatoire les utilisateurs à différentes variantes.
5. Mise en cache des réponses
Le stockage des réactions est une autre façon d’utiliser les capacités de Edge dans Next.js pour rationaliser l’exécution web. Il nous permet de conserver les réactions pendant un certain temps afin de réduire le nombre de requêtes faites au serveur et de travailler sur la vitesse de l’application web.
Voici une illustration de la façon dont vous pouvez effectuer le stockage des réactions avec les capacités Edge dans Next.js :
// pages/api/data.js
const data = { name: 'John Doe', age: 30 };
export default function handler(req, res) {
// Set response headers to enable caching
res.setHeader('Cache-Control', 's-maxage=10, stale-while-revalidate');
// Return data
res.status(200).json(data);
}
Cet exemple définit un point de terminaison de l’API qui renvoie une réponse JSON contenant certaines données.
Nous définissons les en-têtes de réaction à l’aide de la méthode res.setHeader pour permettre la réservation pendant 10 secondes à l’aide de la technique s-max-age limite. Cela indique que le CDN peut mettre la réponse en cache pendant dix secondes au maximum avant de la rafraîchir.
Nous utilisons également l’option stale-while-revalidate pour permettre au CDN de servir une réponse mise en cache qui a expiré alors qu’une nouvelle réponse est en cours d’élaboration en arrière-plan. Même si la réponse mise 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 des fonctions Edge par Next.js est une fonctionnalité convaincante qui vous permet d’exécuter des fonctions personnalisées, sans serveur, plus près de l’utilisateur final sur le réseau périphérique.
Il existe plusieurs façons d’utiliser les fonctions Edge pour améliorer les applications web : Tests A/B, mise en cache des réponses, routage dynamique, récupération de données, authentification.
L’utilisation des fonctions 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.