Intégrer la météo sur votre site : le guide technique définitif

Ce guide couvre toutes les méthodes pour ajouter des données météorologiques à un site web, de la plus simple (une ligne de HTML) à la plus élaborée (API avec cache côté serveur). Chaque approche est détaillée avec ses avantages, ses limites et des exemples de code fonctionnels.

Niveau 1 : L'iframe en une ligne

La méthode la plus rapide au monde. Vous copiez cette ligne dans votre HTML et c'est en ligne.

<iframe src="https://data-meteo-air-live-france.base44.app/"
  width="100%" height="250" loading="lazy"
  style="border:none;border-radius:8px;max-width:400px"
  title="Météo en direct"></iframe>

Avantages : zéro maintenance, zéro dépendance, fonctionne partout. Lewidget météo gratuit se met à jour tout seul.

Limites : personnalisation limitée aux dimensions, style dépendant du fournisseur, pas de contrôle sur les données affichées.

Niveau 2 : API REST avec fetch

Pour un contrôle total sur l'affichage, les APIs retournent les données brutes en JSON. Voici un exemple minimaliste côté client.

async function getMeteo(ville) {
  const res = await fetch(
    `https://api.openweathermap.org/data/2.5/weather` +
    `?q=${ville}&appid=CLE&units=metric&lang=fr`
  );
  const data = await res.json();
  return {
    temp: Math.round(data.main.temp),
    desc: data.weather[0].description,
    icon: data.weather[0].icon
  };
}

Niveau 3 : API côté serveur avec cache

Pour la production, l'appel API doit passer par votre serveur pour protéger votre clé API et mettre en cache les réponses. Cela réduit les coûts et améliore la performance.

// Next.js API Route avec revalidation
export async function GET(request) {
  const res = await fetch(API_URL, {
    next: { revalidate: 900 } // Cache 15 min
  });
  const data = await res.json();
  return Response.json(data);
}

Intégrer aussi la qualité de l'air

Les mêmes APIs proposent souvent les données de qualité de l'air. L'indice de qualité de l'air s'affiche avec un code couleur intuitif. Les données de météo en temps réel et de pollution se combinent naturellement dans une interface unifiée.

Checklist d'intégration

✅ Choisir la méthode adaptée à votre niveau technique
✅ Implémenter le lazy loading pour les widgets iframe
✅ Mettre en cache côté serveur si utilisation d'API
✅ Tester le rendu responsive sur mobile
✅ Vérifier l'accessibilité (attribut title, contraste)
✅ Mesurer l'impact performance avec Lighthouse
✅ Prévoir un fallback en cas d'indisponibilité