Retour au blog

Edge Computing et Serverless en 2025 : Comment Cloudflare, Vercel et AWS Redéfinissent l'Infrastructure

Salut HaWkers, la façon dont nous déployons les applications traverse une révolution silencieuse. L'edge computing a cessé d'être un buzzword pour devenir la stratégie standard des entreprises qui prennent la performance au sérieux.

Vous êtes-vous déjà demandé pourquoi certains sites chargent instantanément tandis que d'autres prennent des secondes ? La réponse se trouve souvent dans l'endroit où le code s'exécute. Et en 2025, cet "endroit" est de plus en plus proche de l'utilisateur.

Qu'est-Ce Que l'Edge Computing

Le Concept Fondamental

L'edge computing est la pratique d'exécuter du code sur des serveurs distribués géographiquement, le plus proche possible des utilisateurs finaux.

Modèle traditionnel (centralisé) :

Utilisateur (France) --> Serveur (USA) --> Réponse (latence: 200ms+)

Modèle edge (distribué) :

Utilisateur (France) --> Edge (Paris) --> Réponse (latence: 20ms)

Pourquoi C'est Important

Selon les données d'IDC, l'utilisation de l'edge computing a crû de 14% mondialement en 2024, et la tendance continue forte en 2025.

Bénéfices principaux :

  • Latence réduite jusqu'à 90%
  • Meilleure expérience utilisateur
  • Coûts optimisés (paiement à l'usage)
  • Scalabilité automatique
  • Résilience globale

💡 Contexte : Dans un e-commerce, chaque 100ms de latence peut réduire les conversions de 1%. À grande échelle, cela représente des millions en revenus.

L'Écosystème en 2025

Cloudflare Workers

Cloudflare Workers est devenu la plateforme de référence pour l'edge computing, avec une présence dans plus de 300 villes mondialement.

// worker.js - Edge function sur Cloudflare
export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    // Logique de routage en edge
    if (url.pathname === '/api/user') {
      const userId = url.searchParams.get('id');

      // Recherche dans KV Storage (distribué globalement)
      const userData = await env.USERS_KV.get(userId, 'json');

      if (!userData) {
        return new Response('Utilisateur non trouvé', { status: 404 });
      }

      return Response.json(userData);
    }

    // Proxy vers origin
    return fetch(request);
  }
};

Ressources de Cloudflare Workers :

  • KV Storage : Key-value store distribué
  • Durable Objects : État persistant en edge
  • R2 : Object storage compatible S3
  • D1 : Base de données SQLite en edge
  • Queues : Files pour traitement asynchrone

Vercel Edge Functions

Vercel a popularisé les edge functions pour les développeurs frontend, particulièrement avec Next.js :

// app/api/hello/route.ts - Edge function avec Next.js
export const runtime = 'edge';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const name = searchParams.get('name') || 'World';

  // Détecter la localisation de l'utilisateur
  const country = request.headers.get('x-vercel-ip-country') || 'Unknown';
  const city = request.headers.get('x-vercel-ip-city') || 'Unknown';

  return Response.json({
    message: `Hello, ${name}!`,
    location: { country, city },
    timestamp: new Date().toISOString(),
  });
}

Différentiels de Vercel :

  • Intégration native avec Next.js
  • Middleware en edge par défaut
  • Edge Config pour feature flags
  • Analytics en temps réel

AWS Lambda@Edge

AWS offre Lambda@Edge pour exécuter du code aux points de présence de CloudFront :

// Lambda@Edge pour personnalisation de contenu
exports.handler = async (event) => {
  const request = event.Records[0].cf.request;
  const headers = request.headers;

  // Détecter l'appareil
  const userAgent = headers['user-agent'][0].value;
  const isMobile = /Mobile|Android|iPhone/i.test(userAgent);

  // Modifier l'URI selon l'appareil
  if (isMobile && !request.uri.includes('/m/')) {
    request.uri = '/m' + request.uri;
  }

  return request;
};

Cas d'Usage Pratiques

1. Personnalisation en Temps Réel

// Edge function pour personnalisation
export default async function middleware(request: Request) {
  const country = request.headers.get('x-vercel-ip-country');

  // Rediriger vers version localisée
  if (country === 'FR' && !request.url.includes('/fr')) {
    return Response.redirect(new URL('/fr' + new URL(request.url).pathname, request.url));
  }

  // A/B testing en edge
  const bucket = Math.random() < 0.5 ? 'A' : 'B';
  const response = await fetch(request);
  const newResponse = new Response(response.body, response);
  newResponse.headers.set('X-Experiment-Bucket', bucket);

  return newResponse;
}

2. API Gateway en Edge

// Rate limiting distribué
export default {
  async fetch(request, env) {
    const ip = request.headers.get('CF-Connecting-IP');
    const key = `rate_limit:${ip}`;

    // Compteur atomique dans Durable Object
    const id = env.RATE_LIMITER.idFromName(ip);
    const rateLimiter = env.RATE_LIMITER.get(id);

    const allowed = await rateLimiter.fetch(request);

    if (!allowed.ok) {
      return new Response('Too Many Requests', {
        status: 429,
        headers: { 'Retry-After': '60' }
      });
    }

    // Continuer vers le backend
    return fetch(request);
  }
};

3. Cache Intelligent

// Cache avec revalidation en edge
export async function GET(request: Request) {
  const url = new URL(request.url);
  const cacheKey = url.pathname;

  // Essayer le cache d'abord
  const cache = caches.default;
  let response = await cache.match(request);

  if (response) {
    // Revalider en background si stale
    const age = parseInt(response.headers.get('age') || '0');
    if (age > 60) {
      // Stale-while-revalidate
      fetch(request).then(freshResponse => {
        cache.put(request, freshResponse.clone());
      });
    }
    return response;
  }

  // Chercher de l'origin
  response = await fetch(`https://api.example.com${url.pathname}`);

  // Mettre en cache en edge
  const cachedResponse = new Response(response.body, response);
  cachedResponse.headers.set('Cache-Control', 'public, max-age=300');
  cache.put(request, cachedResponse.clone());

  return cachedResponse;
}

Comparatif des Plateformes

Temps de Cold Start

Plateforme Cold Start
Cloudflare Workers ~0ms (toujours chaud)
Vercel Edge Functions ~5ms
AWS Lambda@Edge ~50-200ms
AWS Lambda (Node) ~100-500ms

Limites et Ressources

Ressource Cloudflare Vercel AWS Lambda@Edge
CPU Time 50ms (free) / 30s (paid) 30s 5s (viewer) / 30s (origin)
Mémoire 128MB 128MB 128MB
Bundle Size 10MB 4MB 10MB
Localisations 300+ 35+ 400+

Prix (approximatifs)

Cloudflare Workers :

  • 100k requêtes/jour : Gratuit
  • Après : $0.50/million de requêtes

Vercel Edge :

  • 100k exécutions/mois : Gratuit (Hobby)
  • Après : $0.65/million d'exécutions

AWS Lambda@Edge :

  • $0.60/million de requêtes
  • $0.00005001/GB-seconde

Bonnes Pratiques Pour l'Edge

1. Minimisez les Dépendances

// Mauvais - bundle trop gros
import lodash from 'lodash';
const result = lodash.groupBy(data, 'category');

// Bon - seulement le nécessaire
const groupBy = (arr, key) => arr.reduce((acc, item) => {
  (acc[item[key]] = acc[item[key]] || []).push(item);
  return acc;
}, {});

2. Utilisez le Streaming Pour les Grandes Réponses

export async function GET() {
  const encoder = new TextEncoder();

  const stream = new ReadableStream({
    async start(controller) {
      for (let i = 0; i < 100; i++) {
        const chunk = encoder.encode(`data: ${JSON.stringify({ count: i })}\n\n`);
        controller.enqueue(chunk);
        await new Promise(r => setTimeout(r, 100));
      }
      controller.close();
    }
  });

  return new Response(stream, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
    }
  });
}

3. Exploitez le Cache de Façon Stratégique

export async function GET(request: Request) {
  const url = new URL(request.url);

  // Headers de cache selon le contenu
  const isStaticAsset = /\.(js|css|png|jpg)$/.test(url.pathname);

  const response = await fetch(request);
  const newResponse = new Response(response.body, response);

  if (isStaticAsset) {
    // Assets statiques - cache long
    newResponse.headers.set('Cache-Control', 'public, max-age=31536000, immutable');
  } else {
    // Contenu dynamique - stale-while-revalidate
    newResponse.headers.set('Cache-Control', 'public, max-age=60, stale-while-revalidate=600');
  }

  return newResponse;
}

Intégration avec les Runtimes JavaScript

Bun en Edge

Des plateformes comme Cloudflare et Vercel intègrent Bun pour le déploiement edge :

// Utiliser Bun dans Cloudflare Workers
export default {
  async fetch(request: Request): Promise<Response> {
    // APIs de Bun disponibles
    const file = Bun.file('./data.json');
    const data = await file.json();

    return Response.json(data);
  }
};

Deno Deploy

Deno Deploy offre une alternative focalisée sur la sécurité :

// Deno Deploy edge function
Deno.serve((request) => {
  const url = new URL(request.url);

  if (url.pathname === '/api/time') {
    return Response.json({
      time: new Date().toISOString(),
      region: Deno.env.get('DENO_REGION'),
    });
  }

  return new Response('Not Found', { status: 404 });
});

L'Avenir de l'Edge Computing

Tendances Pour 2026

Ce qu'il faut attendre :

  • Les edge databases devenant mainstream
  • L'inférence IA en edge
  • WebAssembly élargissant les possibilités
  • Mesh d'edges interconnectés

Défis à surmonter :

  • Consistance des données distribuées
  • Debugging en environnement distribué
  • Vendor lock-in

Conclusion

L'edge computing et le serverless ont cessé d'être des tendances pour devenir la façon standard de déployer des applications modernes. Avec des cold starts pratiquement nuls, une présence globale et des coûts basés sur l'usage réel, il n'y a plus d'excuse pour des applications lentes.

Pour les développeurs JavaScript, le moment est idéal : les mêmes compétences que vous avez déjà fonctionnent en edge. Cloudflare Workers, Vercel Edge Functions et AWS Lambda@Edge utilisent des APIs web standard, facilitant la migration.

Le plus important est de commencer. Déplacez une seule fonction vers l'edge, mesurez la différence, et élargissez. Vos utilisateurs vous remercieront.

Si vous voulez en savoir plus sur les nouvelles approches de développement web, je recommande de consulter l'article sur Server-First Development avec Astro et Remix où vous découvrirez comment les nouveaux frameworks exploitent l'edge pour livrer des expériences incroyables.

C'est parti ! 🦅

Commentaires (0)

Cet article n'a pas encore de commentaires. Soyez le premier!

Ajouter des commentaires