MAISON CODE .
/ Tech · Performance · Edge · Cloud · Architecture

Edge Computing : battre la vitesse de la lumière

La vitesse de la lumière est une limite stricte. Comment utiliser Edge Functions (Vercel/Cloudflare) pour exécuter la logique à 10 millisecondes de votre utilisateur.

AB
Alex B.
Edge Computing : battre la vitesse de la lumière

Si votre serveur est en Virginie (us-east-1) et que votre utilisateur est à Tokyo :

  • La demande parcourt 10 000 km.
  • Latence = ~150 ms.
  • Aller-retour = ~300 ms. Aucune optimisation du code ne peut corriger la physique. La seule façon d’aller plus vite est de réduire la distance physique. Edge Computing déplace la logique de « Le serveur » (un seul endroit) vers « The Edge » (partout). Au lieu d’un serveur en Virginie, votre code s’exécute sur 500 serveurs dans 500 villes. L’utilisateur de Tokyo accède au serveur de Tokyo. Latence = 10 ms.

Pourquoi Maison Code en parle

Chez Maison Code Paris, nous agissons comme la conscience architecturale de nos clients. Nous héritons souvent de stacks “modernes” construites sans compréhension fondamentale de l’échelle.

Nous abordons ce sujet car il représente un point de pivot critique dans la maturité de l’ingénierie. Une mise en œuvre correcte différencie un MVP fragile d’une plateforme résiliente de niveau entreprise.

Edge Middleware (l’intercepteur)

Dans des frameworks comme Next.js, cela s’appelle Middleware. Il s’exécute avant que la requête n’atteigne le serveur principal ou le cache. Il est extrêmement léger (durée d’exécution limitée, pas d’API Node.js). Cas d’utilisation :

  1. Personnalisation :
    • Cookie de lecture : user_segment=vip.
    • Réécrire l’URL : /home -> /home-vip.
    • Cela se produit instantanément au bord. Aucun scintillement côté client.
  2. Géoblocage/routage :
    • “L’utilisateur est en France ?” -> Redirection vers /fr. * « L’utilisateur est dans Office IP ? » -> Afficher l’environnement de préparation.
  3. Tests A/B :
    • Répartir le trafic 50/50.
    • Attribuer un cookie.

Le problème de la base de données

L’exécution de code en périphérie est résolue (Vercel, Cloudflare Workers, AWS Lambda@Edge). Mais les données se trouvent généralement au même endroit (la base de données primaire).

  • Fonction Edge (Tokyo) -> Base de données (Virginie).
  • Nous avons réintroduit la latence ! SOLUTIONS :
  1. Répliques en lecture : placez une base de données en lecture seule à Tokyo. (Bon pour les sites de contenu).
  2. Bases de données mondiales : utilisez Turso (LibSQL) ou Cloudflare D1. Ils répliquent automatiquement les données vers la périphérie.
  3. Edge Caching : mettez en cache la réponse de la base de données dans Redis at the Edge (Upstash).

Est-ce que « Sans serveur » est la même chose que « Edge » ?

Non.

  • Sans serveur (Lambda) : génère un conteneur dans une région spécifique (par exemple, us-east-1). Les démarrages à froid peuvent être lents (500 ms). Possède toute la puissance de Node.js.
  • Edge (Workers) : génère un isolat (V8) dans le centre de données le plus proche. Les démarrages à froid sont instantanés (0 ms). Possède une API limitée (API Web standard). Décision architecturale :
  • Utilisez Edge pour le routage, les vérifications d’authentification et la logique simple.
  • Utilisez Serverless pour les traitements lourds (redimensionnement d’image, génération de PDF).

4. État Edge : objets durables

Cloudflare Workers a introduit les objets durables. Cela vous permet de stocker l’état sur le nœud Edge lui-même. Cas d’utilisation : collaboration en temps réel (style Google Docs).

  1. L’utilisateur A (Paris) se connecte à DO à Paris.
  2. L’utilisateur B (Londres) se connecte au DO à Paris (nœud actif le plus proche).
  3. Ils partagent une connexion WebSocket avec une latence de 10 ms.
  4. L’état (texte du document) est stocké dans la RAM sur Edge. Pas d’aller-retour en Virginie.

5. Le problème d’invalidation du cache

“Il n’y a que deux choses difficiles en informatique : l’invalidation du cache et la dénomination des choses.” Si vous mettez le HTML en cache sur Edge, la mise à jour du site est instantanée pour vous, mais les utilisateurs voient l’ancienne version. Stratégie : Stale-While-Revalidate (SWR).

  1. Edge diffuse le contenu mis en cache (instantané).
  2. Edge récupère de manière asynchrone le nouveau contenu d’Origin.
  3. Edge met à jour le cache.
  4. L’utilisateur suivant voit le nouveau contenu. Ou utilisez des Clés de substitution. Marquez votre contenu (product-123). Lorsque vous mettez à jour le produit 123, demandez au CDN de purger la balise « produit-123 ».

7. Optimisation de l’image à la périphérie

Traditionnellement, vous redimensionnez les images sur le serveur ou utilisez un service comme Cloudinary. Désormais, Edge peut le faire. Cloudflare Images ou Vercel Image Optimization s’exécutent en périphérie. Il détecte : “L’utilisateur est sur Android ? Servez WebP.” “L’utilisateur est sur iPhone ? Servez JPEG.” Il est redimensionné en fonction de l’en-tête « largeur ». Cela décharge le travail massif du processeur de votre serveur d’origine. Votre origine sert une image principale haute résolution. The Edge propose 50 variantes localisées.

8. Rendu SEO à la périphérie

Les moteurs de recherche (Googlebot) s’améliorent avec JS, mais le HTML brut reste roi. Si vous disposez d’un SPA (application à page unique) personnalisé, vous pouvez utiliser Edge pour effectuer un “pré-rendu” uniquement pour les robots. User-Agent : Googlebot -> La fonction Edge restitue le HTML -> Renvoie la page statique. User-Agent : Chrome -> La fonction Edge agit en tant que proxy -> Renvoie le bundle SPA. Il s’agit du Serving dynamique. Il vous offre le référencement d’un site statique avec l’UX d’une application.

9. Hyper-personnalisation à la périphérie

“Bonjour, [Nom]” est basique. “Bonjour, on voit qu’il pleut à Tokyo. Acheter un parapluie ?” est la personnalisation des bords. Nous recherchons l’IP de l’utilisateur -> API Météo (mise en cache sur Edge). Nous réécrivons la bannière du héros pour montrer les imperméables. Parce que la logique s’exécute à Tokyo (près de l’utilisateur), elle ajoute 0 ms à la latence par rapport à une page statique. Nous pouvons également réorganiser les grilles de produits en fonction du « Score d’affinité » stocké dans un Edge Cookie.

10. Géolocalisation de conformité

RGPD (Europe) vs CCPA (Californie) vs PIPL (Chine). Les règles de souveraineté des données sont strictes. “Les données des utilisateurs en provenance d’Allemagne ne doivent pas quitter l’Allemagne.” Les fonctions Edge résolvent ce problème. Nous acheminons les adresses IP allemandes vers le centre de données de Francfort. La fonction Edge écrit dans une base de données D1 locale à Francfort. Les données ne traversent jamais l’Atlantique. Cela fait de la « conformité globale » une règle de routage et non un cauchemar juridique.

11. WebAssembly (WASM) à la périphérie

Les isolats V8 sont rapides, mais ils sont JavaScript. Parfois, vous avez besoin de puissance brute (Rust/C++). Cloudflare Workers prend en charge WASM. Cas d’utilisation : redimensionnement d’image (Photon), cryptographie ou inférence IA (ONNX). Vous compilez votre code Rust sur WASM et le téléchargez sur Edge. Le Worker appelle la fonction WASM avec des performances quasi natives. Cela nous permet d’exécuter des calculs « lourds » (comme des algorithmes de transcodage vidéo ou de personnalisation) sans lancer de Lambda.

10. Pourquoi Maison Code ?

Chez Maison Code, nous sommes obsédés par le Time to First Byte (TTFB). Nous ne nous contentons pas du « assez vite ». Nous voulons “Instantané”. Nous concevons nos solutions (Hydrogen/Remix) pour exploiter Edge par défaut. Nous savons quels en-têtes définir (« stale-while-revalidate »), quelles bases de données utiliser (Turso/D1) et comment acheminer le trafic à l’échelle mondiale. Nous faisons de la physique votre alliée, pas votre ennemie.

12. Balisage côté serveur à la périphérie

Les pixels marketing (Facebook CAPI, TikTok Events) s’exécutent généralement dans le navigateur. Ils ralentissent la page et sont bloqués par les AdBlockers. Nous les déplaçons vers le Edge.

  1. L’utilisateur clique sur “Acheter”.
  2. Le navigateur envoie 1 balise légère à edge.maisoncode.paris.
  3. Edge Function transmet l’événement à Facebook, TikTok, Google, Snapchat. Résultat :
  • Précision des données à 100 % (contourne AdBlock).
  • Blocage du fil principal de 0 ms.
  • Sécurisé (clés API cachées sur le serveur).

13. Analyse des coûts de pointe

“Est-ce que le Edge est cher ?” En fait, c’est moins cher que les serveurs traditionnels.

  • AWS Lambda : vous payez pour la durée (Go-secondes). Les démarrages à froid coûtent de l’argent.
  • Cloudflare Workers : vous payez pour les demandes (millions d’opérations). Le temps CPU est souvent gratuit (dans certaines limites).
  • Aucun coût d’inactivité : vous ne payez pas pour les serveurs vides à 3 heures du matin. Pour un site à fort trafic, le « Cache Hit Ratio » en périphérie réduit la charge sur votre base de données Origin de 90 %, réduisant ainsi considérablement la facture de votre base de données. Cela se paie tout seul.

14. Liste de contrôle de la stratégie Edge

Vous passez au Edge ?

  1. Identifier les itinéraires dynamiques : quelles pages nécessitent réellement une personnalisation ?
  2. Localité de la base de données : votre base de données est-elle mondiale (Turso) ou régionale (AWS RDS) ?
  3. Gestion des en-têtes : configurez « stale-while-revalidate ».
  4. Gestion des exceptions : logique de repli vers le contenu statique en cas d’échec d’Edge.
  5. Logging : configurez les drains de journaux (Cloudflare -> Datadog).
  6. CI/CD : déploiement automatique sur Edge sur git push.
  7. Cost Plafond : définissez des limites sur les demandes des travailleurs pour éviter les surprises de facturation.
  8. Variables d’environnement : synchronisez les secrets avec l’environnement Edge.
  9. Démarrages à froid : mesurez la latence P99.
  10. Retours : si Edge est en panne, le CDN diffuse-t-il du contenu obsolète ?

15. Conclusion

The Edge est l’avenir du Frontend. Nous déplaçons la logique hors de l’appareil de l’utilisateur (client) et du serveur central (origine) vers l’espace intermédiaire. Cela active la « vitesse statique » avec la « personnalisation dynamique ». C’est le meilleur des deux mondes.


Latence trop élevée ?

Nous mettons en œuvre des stratégies Edge Middleware pour personnaliser le contenu sans sacrifier le TTFB. Engagez nos Architectes.