Maîtriser React Suspense : Améliorer les Applications Globales avec la Gestion de Pool de Ressources pour le Chargement de Données Partagées

Dans le vaste et interconnecté paysage du développement web moderne, la création d'applications performantes, évolutives et résilientes est primordiale, surtout lorsqu'il s'agit de servir une base d'utilisateurs diversifiée et mondiale. Les utilisateurs à travers les continents s'attendent à des expériences fluides, quelles que soient leurs conditions réseau ou les capacités de leur appareil. React, avec ses fonctionnalités innovantes, continue de permettre aux développeurs de répondre à ces attentes élevées. Parmi ses ajouts les plus transformateurs figure React Suspense, un mécanisme puissant conçu pour orchestrer les opérations asynchrones, principalement la récupération de données et le fractionnement de code, de manière à offrir une expérience plus fluide et conviviale.

Alors que Suspense aide intrinsèquement à gérer les états de chargement des composants individuels, la véritable puissance émerge lorsque nous appliquons des stratégies intelligentes sur la manière dont les données sont récupérées et partagées à travers une application entière. C'est là que la Gestion de Pool de Ressources pour le chargement de données partagées devient non seulement une bonne pratique, mais une considération architecturale critique. Imaginez une application où plusieurs composants, peut-être sur différentes pages ou au sein d'un tableau de bord unique, nécessitent tous la même donnée – un profil d'utilisateur, une liste de pays ou des taux de change en temps réel. Sans une stratégie cohérente, chaque composant pourrait déclencher sa propre requête de données identique, entraînant des appels réseau redondants, une charge serveur accrue, des performances d'application plus lentes et une expérience sous-optimale pour les utilisateurs du monde entier.

Ce guide complet explore en profondeur les principes et les applications pratiques de l'utilisation de React Suspense en conjonction avec une gestion robuste de pool de ressources. Nous verrons comment architecturer votre couche de récupération de données pour garantir l'efficacité, minimiser la redondance et offrir des performances exceptionnelles, quelle que soit la localisation géographique ou l'infrastructure réseau de vos utilisateurs. Préparez-vous à transformer votre approche du chargement des données et à libérer tout le potentiel de vos applications React.

Comprendre React Suspense : Un Changement de Paradigme dans l'Interface Utilisateur Asynchrone

Avant de nous plonger dans la mise en commun des ressources, établissons une compréhension claire de React Suspense. Traditionnellement, la gestion des opérations asynchrones dans React impliquait de gérer manuellement les états de chargement, les états d'erreur et les états de données au sein des composants, conduisant souvent à un modèle connu sous le nom de "fetch-on-render" (récupération lors du rendu). Cette approche pouvait entraîner une cascade de spinners de chargement, une logique de rendu conditionnel complexe et une expérience utilisateur loin d'être idéale.

React Suspense introduit une manière déclarative de dire à React : "Hé, ce composant n'est pas encore prêt à être rendu car il attend quelque chose." Lorsqu'un composant suspends (par exemple, lors de la récupération de données ou du chargement d'un fragment de code divisé), React peut suspendre son rendu, afficher une interface utilisateur de secours (comme un spinner ou un écran squelette) définie par une limite <Suspense> ancestrale, puis reprendre le rendu une fois que les données ou le code sont disponibles. Cela centralise la gestion de l'état de chargement, rendant la logique des composants plus propre et les transitions d'interface utilisateur plus fluides.

L'idée principale derrière Suspense pour la récupération de données est que les bibliothèques de récupération de données peuvent s'intégrer directement au moteur de rendu de React. Lorsqu'un composant tente de lire des données qui ne sont pas encore disponibles, la bibliothèque "jette une promesse". React intercepte cette promesse, suspend le composant et attend que la promesse soit résolue avant de tenter à nouveau le rendu. Ce mécanisme élégant permet aux composants de déclarer leurs besoins en données de manière "agnostique aux données", tandis que la limite Suspense gère l'état d'attente.

Le Défi : Récupération de Données Redondante dans les Applications Globales

Bien que Suspense simplifie les états de chargement locaux, il ne résout pas automatiquement le problème de plusieurs composants récupérant les mêmes données indépendamment. Considérez une application e-commerce globale :

• Un utilisateur navigue vers une page produit.
• Le composant <ProductDetails /> récupère les informations du produit.
• Simultanément, un composant de barre latérale <RecommendedProducts /> pourrait également avoir besoin de certains attributs du même produit pour suggérer des articles similaires.
• Un composant <UserReviews /> pourrait récupérer le statut d'évaluation de l'utilisateur actuel, ce qui nécessite de connaître l'ID utilisateur – une donnée déjà récupérée par un composant parent.

Dans une implémentation naïve, chacun de ces composants pourrait déclencher sa propre requête réseau pour les mêmes données ou des données qui se chevauchent. Les conséquences sont significatives, en particulier pour un public mondial :

• Latence Accrue et Temps de Chargement Plus Lents : Plusieurs requêtes signifient plus d'allers-retours sur des distances potentiellement longues, exacerbant les problèmes de latence pour les utilisateurs éloignés de vos serveurs.
• Charge Serveur Plus Élevée : Votre infrastructure backend doit traiter et répondre à des requêtes dupliquées, consommant des ressources inutiles.
• Bande Passante Gâchée : Les utilisateurs, en particulier ceux sur les réseaux mobiles ou dans les régions avec des forfaits de données coûteux, consomment plus de données que nécessaire.
• États d'Interface Utilisateur Incohérents : Des conditions de concurrence peuvent survenir où différents composants reçoivent des versions légèrement différentes des "mêmes" données si des mises à jour se produisent entre les requêtes.
• Expérience Utilisateur (UX) Réduite : Un contenu clignotant, une interactivité retardée et une sensation générale de lenteur peuvent décourager les utilisateurs, entraînant des taux de rebond plus élevés à l'échelle mondiale.
• Logique Côté Client Complexe : Les développeurs ont souvent recours à des solutions complexes de mémoïsation ou de gestion d'état au sein des composants pour atténuer ce problème, ajoutant de la complexité.

Ce scénario souligne la nécessité d'une approche plus sophistiquée : la Gestion de Pool de Ressources.

Présentation de la Gestion de Pool de Ressources pour le Chargement de Données Partagées

La gestion de pool de ressources, dans le contexte de React Suspense et du chargement de données, fait référence à l'approche systématique de centralisation, d'optimisation et de partage des opérations de récupération de données et de leurs résultats à travers une application. Au lieu que chaque composant initie indépendamment une requête de données, un "pool" ou un "cache" agit comme un intermédiaire, garantissant qu'une donnée particulière n'est récupérée qu'une seule fois, puis mise à la disposition de tous les composants demandeurs. Ceci est analogue au fonctionnement des pools de connexions de bases de données ou des pools de threads : réutiliser les ressources existantes plutôt que d'en créer de nouvelles.

Les objectifs principaux de l'implémentation d'un pool de ressources partagé pour le chargement de données sont :

• Éliminer les Requêtes Réseau Redondantes : Si les données sont déjà en cours de récupération ou ont été récupérées récemment, fournir les données existantes ou la promesse en cours de ces données.
• Améliorer les Performances : Réduire la latence en servant les données à partir du cache ou en attendant une seule requête réseau partagée.
• Améliorer l'Expérience Utilisateur : Offrir des mises à jour d'interface utilisateur plus rapides et plus cohérentes avec moins d'états de chargement.
• Réduire la Charge Serveur : Diminuer le nombre de requêtes atteignant vos services backend.
• Simplifier la Logique des Composants : Les composants deviennent plus simples, n'ayant qu'à déclarer leurs besoins en données, sans se soucier de comment ou quand les données sont récupérées.
• Gérer le Cycle de Vie des Données : Fournir des mécanismes de revalidation, d'invalidation et de récupération de mémoire des données.

Lorsqu'il est intégré à React Suspense, ce pool peut contenir les promesses des récupérations de données en cours. Lorsqu'un composant tente de lire des données du pool qui ne sont pas encore disponibles, le pool retourne la promesse en attente, ce qui fait suspendre le composant. Une fois la promesse résolue, tous les composants en attente de cette promesse seront rendus à nouveau avec les données récupérées. Cela crée une puissante synergie pour gérer des flux asynchrones complexes.

Stratégies pour une Gestion Efficace des Ressources de Chargement de Données Partagées

Explorons plusieurs stratégies robustes pour implémenter des pools de ressources de chargement de données partagées, allant des solutions personnalisées à l'utilisation de bibliothèques matures.

1. Mémoïsation et Mise en Cache au Niveau de la Couche de Données

Au plus simple, la mise en commun des ressources peut être réalisée via la mémoïsation et la mise en cache côté client. Cela implique de stocker les résultats des requêtes de données (ou les promesses elles-mêmes) dans un mécanisme de stockage temporaire, empêchant ainsi les futures requêtes identiques. C'est une technique fondamentale qui sous-tend des solutions plus avancées.

Implémentation de Cache Personnalisée :

Vous pouvez construire un cache en mémoire de base en utilisant Map ou WeakMap de JavaScript. Une Map convient à la mise en cache générale où les clés sont des types primitifs ou des objets que vous gérez, tandis que WeakMap est excellente pour la mise en cache où les clés sont des objets susceptibles d'être soumis au ramasse-miettes, permettant ainsi à la valeur mise en cache d'être également soumise au ramasse-miettes.

            const dataCache = new Map();

function fetchWithCache(url, options) {
  if (dataCache.has(url)) {
    return dataCache.get(url);
  }

  const promise = fetch(url, options)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .catch(error => {
      dataCache.delete(url); // Remove entry if fetch failed
      throw error;
    });

  dataCache.set(url, promise);
  return promise;
}

// Example usage with Suspense
let userData = null;
function readUser(userId) {
  if (userData === null) {
    const promise = fetchWithCache(`/api/users/${userId}`);
    promise.then(data => (userData = data));
    throw promise; // Suspense will catch this promise
  }
  return userData;
}

function UserProfile({ userId }) {
  const user = readUser(userId);
  return <h2>Bienvenue, {user.name}</h2>;
}

            

              
                Copy
              
            
          

Cet exemple simple montre comment un dataCache partagé peut stocker des promesses. Lorsque readUser est appelé plusieurs fois avec le même userId, il retourne soit la promesse mise en cache (si en cours) soit les données mises en cache (si résolues), empêchant les récupérations redondantes. Le défi principal des caches personnalisés est la gestion de l'invalidation, de la revalidation et des limites de mémoire du cache.

2. Fournisseurs de Données Centralisés et Contexte React

Pour les données spécifiques à l'application qui pourraient être structurées ou nécessiter une gestion d'état plus complexe, le Contexte React peut servir de base puissante pour un fournisseur de données partagées. Un composant fournisseur central peut gérer la logique de récupération et de mise en cache, exposant une interface cohérente pour que les composants enfants consomment les données.

            import React, { createContext, useContext, useState, useEffect } from 'react';

const UserContext = createContext(null);

const userResourceCache = new Map(); // Un cache partagé pour les promesses de données utilisateur

function getUserResource(userId) {
  if (!userResourceCache.has(userId)) {
    let status = 'pending';
    let result;
    const suspender = fetch(`/api/users/${userId}`)
      .then(response => response.json())
      .then(
        (r) => {
          status = 'success';
          result = r;
        },
        (e) => {
          status = 'error';
          result = e;
        }
      );
    userResourceCache.set(userId, { read() {
      if (status === 'pending') throw suspender;
      if (status === 'error') throw result;
      return result;
    }});
  }
  return userResourceCache.get(userId);
}

export function UserProvider({ children, userId }) {
  const userResource = getUserResource(userId);
  const user = userResource.read(); // Suspendra si les données ne sont pas prêtes

  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
}

export function useUser() {
  const context = useContext(UserContext);
  if (context === null) {
    throw new Error('useUser doit être utilisé à l\'intérieur d\'un UserProvider');
  }
  return context;
}

// Utilisation dans les composants :
function UserGreeting() {
  const user = useUser();
  return <p>Bonjour, {user.firstName}!</p>;
}

function UserAvatar() {
  const user = useUser();
  return <img src={user.avatarUrl} alt={user.name + " avatar"} />;
}

function Dashboard() {
  const currentUserId = 'user123'; // Supposons que cela provienne du contexte d'authentification ou d'une prop
  return (
    <Suspense fallback={<div>Chargement des données utilisateur...</div>}>
      <UserProvider userId={currentUserId}>
        <UserGreeting />
        <UserAvatar />
        <!-- Autres composants ayant besoin de données utilisateur -->
      </UserProvider>
    </Suspense>
  );
}

            

              
                Copy
              
            
          

Dans cet exemple, UserProvider récupère les données utilisateur en utilisant un cache partagé. Tous les enfants consommant UserContext accéderont au même objet utilisateur (une fois résolu) et se suspendront si les données sont toujours en cours de chargement. Cette approche centralise la récupération des données et les fournit de manière déclarative à travers un sous-arbre.

3. Exploiter les Bibliothèques de Récupération de Données Compatibles avec Suspense

Pour la plupart des applications globales, développer une solution robuste de récupération de données compatible avec Suspense, dotée d'une mise en cache complète, d'une revalidation et d'une gestion des erreurs, peut être une entreprise considérable. C'est là que les bibliothèques dédiées brillent. Ces bibliothèques sont spécifiquement conçues pour gérer un pool de ressources de données, s'intégrer de manière transparente avec Suspense et fournir des fonctionnalités avancées prêtes à l'emploi.

a. SWR (Stale-While-Revalidate - Périmé-Pendant-Revalidation)

Développé par Vercel, SWR est une bibliothèque de récupération de données légère qui privilégie la vitesse et la réactivité. Son principe fondamental, "stale-while-revalidate" (périmé-pendant-revalidation), signifie qu'il retourne d'abord les données du cache (périmées), puis les revalide en envoyant une requête de récupération, et enfin met à jour avec les données fraîches. Cela fournit un retour d'information immédiat à l'interface utilisateur tout en garantissant la fraîcheur des données.

SWR construit automatiquement un cache partagé (pool de ressources) basé sur la clé de requête. Si plusieurs composants utilisent useSWR('/api/data'), ils partageront tous les mêmes données mises en cache et la même promesse de récupération sous-jacente, gérant efficacement le pool de ressources implicitement.

            import useSWR from 'swr';
import React, { Suspense } from 'react';

const fetcher = (url) => fetch(url).then((res) => res.json());

function UserProfile({ userId }) {
  // SWR partagera automatiquement les données et gérera Suspense
  const { data: user } = useSWR(`/api/users/${userId}`, fetcher, { suspense: true });
  return <h2>Bienvenue, {user.name}</h2>;
}

function UserSettings() {
  const { data: user } = useSWR(`/api/users/current`, fetcher, { suspense: true });
  return (
    <div>
      <p>Email : {user.email}</p>
      <!-- Plus de paramètres -->
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<div>Chargement du profil utilisateur...</div>}>
      <UserProfile userId="123" />
      <UserSettings />
    </Suspense>
  );
}

            

              
                Copy
              
            
          

Dans cet exemple, si UserProfile et UserSettings demandent d'une manière ou d'une autre les mêmes données utilisateur (par exemple, toutes deux demandant /api/users/current), SWR garantit qu'une seule requête réseau est effectuée. L'option suspense: true permet à SWR de lancer une promesse, laissant React Suspense gérer les états de chargement.

b. React Query (TanStack Query)

React Query est une bibliothèque de récupération de données et de gestion d'état plus complète. Elle fournit des hooks puissants pour la récupération, la mise en cache, la synchronisation et la mise à jour de l'état du serveur dans vos applications React. React Query gère également de manière inhérente un pool de ressources partagé en stockant les résultats des requêtes dans un cache global.

Ses fonctionnalités incluent la récupération en arrière-plan, des tentatives intelligentes, la pagination, les mises à jour optimistes et une intégration approfondie avec React DevTools, ce qui la rend adaptée aux applications globales complexes et gourmandes en données.

            import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React, { Suspense } from 'react';

const queryClient = new QueryClient({ 
  defaultOptions: { 
    queries: { 
      suspense: true,
      staleTime: 1000 * 60 * 5, // Les données sont considérées comme fraîches pendant 5 minutes
    }
  }
});

const fetchUserById = async (userId) => {
  const res = await fetch(`/api/users/${userId}`);
  if (!res.ok) throw new Error('Échec de la récupération de l\'utilisateur');
  return res.json();
};

function UserInfoDisplay({ userId }) {
  const { data: user } = useQuery({ queryKey: ['user', userId], queryFn: () => fetchUserById(userId) });
  return <div>Utilisateur : <b>{user.name}</b> ({user.email})</div>;
}

function UserDashboard({ userId }) {
  return (
    <div>
      <h3>Tableau de Bord Utilisateur</h3>
      <UserInfoDisplay userId={userId} />
      <!-- Potentiellement d'autres composants nécessitant des données utilisateur -->
    </div>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Suspense fallback={<div>Chargement des données de l'application...</div>}>
        <UserDashboard userId="user789" />
      </Suspense>
    </QueryClientProvider>
  );
}

            

              
                Copy
              
            
          

Ici, useQuery avec la même queryKey (par exemple, ['user', 'user789']) accèdera aux mêmes données dans le cache de React Query. Si une requête est en cours, les appels ultérieurs avec la même clé attendront la promesse en cours sans initier de nouvelles requêtes réseau. Cette mise en commun robuste des ressources est gérée automatiquement, ce qui la rend idéale pour gérer le chargement de données partagées dans des applications globales complexes.

c. Apollo Client (GraphQL)

Pour les applications utilisant GraphQL, Apollo Client est un choix populaire. Il est livré avec un cache normalisé intégré qui agit comme un pool de ressources sophistiqué. Lorsque vous récupérez des données avec des requêtes GraphQL, Apollo stocke les données dans son cache, et les requêtes ultérieures pour les mêmes données (même si structurées différemment) seront souvent servies à partir du cache sans requête réseau.

Apollo Client prend également en charge Suspense (expérimental dans certaines configurations, mais mûrissant rapidement). En utilisant le hook useSuspenseQuery (ou en configurant useQuery pour Suspense), les composants peuvent tirer parti des états de chargement déclaratifs qu'offre Suspense.

            import { ApolloClient, InMemoryCache, ApolloProvider, useSuspenseQuery, gql } from '@apollo/client';
import React, { Suspense } from 'react';

const client = new ApolloClient({
  uri: 'https://your-graphql-api.com/graphql',
  cache: new InMemoryCache(),
});

const GET_PRODUCT_DETAILS = gql`
  query GetProductDetails($productId: ID!) {
    product(id: $productId) {
      id
      name
      description
      price
      currency
    }
  }
`;

function ProductDisplay({ productId }) {
  // Le cache d'Apollo Client agit comme le pool de ressources
  const { data } = useSuspenseQuery(GET_PRODUCT_DETAILS, {
    variables: { productId },
  });
  const { product } = data;
  return (
    <div>
      <h2>{product.name} ({product.currency} {product.price})</h2>
      <p>{product.description}</p>
    </div>
  );
}

function RelatedProducts({ productId }) {
  // Un autre composant utilisant des données potentiellement superposées
  // Le cache d'Apollo garantira une récupération efficace
  const { data } = useSuspenseQuery(GET_PRODUCT_DETAILS, {
    variables: { productId },
  });
  const { product } = data;
  return (
    <div>
      <h3>Les clients ont également aimé pour {product.name}</h3>
      <!-- Logique pour afficher les produits connexes -->
    </div>
  );
}

function App() {
  return (
    <ApolloProvider client={client}>
      <Suspense fallback={<div>Chargement des informations produit...</div>}>
        <ProductDisplay productId="prod123" />
        <RelatedProducts productId="prod123" /> 
      </Suspense>
    </ApolloProvider>
  );
}
```

import { queryClient } from './queryClientConfig'; // Supposons que queryClient est exporté
import { fetchUserDetails } from './api'; // Supposons une fonction API

// Exemple : Pré-récupération des données utilisateur au survol de la souris
function UserLink({ userId, children }) {
  const handleMouseEnter = () => {
    queryClient.prefetchQuery({ queryKey: ['user', userId], queryFn: () => fetchUserDetails(userId) });
  };

  return (
    <a href={`/users/${userId}`} onMouseEnter={handleMouseEnter}>
      {children}
    </a>
  );
}

// Lorsque le composant UserProfile est rendu, les données sont probablement déjà en cache :
// function UserProfile({ userId }) {
//   const { data: user } = useQuery({ queryKey: ['user', userId], queryFn: () => fetchUserDetails(userId), suspense: true });
//   return <h2>{user.name}</h2>;
// }

            

              
                Copy
              
            
          

            class ResourcePoolManager {
  constructor() {
    this.pool = new Map(); // Stocke les promesses ou les données/ressources résolues
    this.subscribers = new Map(); // Traque les composants en attente d'une ressource
  }

  // Acquérir une ressource (données, connexion WebSocket, etc.)
  acquire(key, resourceFetcher) {
    if (this.pool.has(key)) {
      return this.pool.get(key);
    }

    let status = 'pending';
    let result;
    const suspender = resourceFetcher()
      .then(
        (r) => {
          status = 'success';
          result = r;
          this.notifySubscribers(key, r); // Notifier les composants en attente
        },
        (e) => {
          status = 'error';
          result = e;
          this.notifySubscribers(key, e); // Notifier avec une erreur
          this.pool.delete(key); // Nettoyer la ressource échouée
        }
      );
    
    const resourceWrapper = { read() {
      if (status === 'pending') throw suspender;
      if (status === 'error') throw result;
      return result;
    }};

    this.pool.set(key, resourceWrapper);
    return resourceWrapper;
  }

  // Pour les scénarios où les ressources nécessitent une libération explicite (par exemple, WebSockets)
  release(key) {
    if (this.pool.has(key)) {
      // Effectuer la logique de nettoyage spécifique au type de ressource
      // par exemple, this.pool.get(key).close();
      this.pool.delete(key);
      this.subscribers.delete(key);
    }
  }

  // Mécanisme pour s'abonner/notifier les composants (simplifié)
  // Dans un scénario réel, cela impliquerait probablement le contexte de React ou un hook personnalisé
  notifySubscribers(key, data) {
    // Implémenter la logique de notification réelle, par exemple, forcer la mise à jour des abonnés
  }
}

// Instance globale ou passée via le Contexte
const globalResourceManager = new ResourcePoolManager();

// Utilisation avec un hook personnalisé pour Suspense
function useResource(key, fetcherFn) {
  const resourceWrapper = globalResourceManager.acquire(key, fetcherFn);
  return resourceWrapper.read(); // Suspendra ou retournera les données
}

// Utilisation du composant :
function FinancialDataWidget({ stockSymbol }) {
  const data = useResource(`stock-${stockSymbol}`, () => fetchStockData(stockSymbol));
  return <p>{stockSymbol} : {data.price}</p>;
}

            

              
                Copy
              
            
          

            import React, { Suspense } from 'react';
import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
      staleTime: 1000 * 60 * 10, // Cache pendant 10 minutes
      refetchOnWindowFocus: false, // Pour les applications globales, un rafraîchissement moins agressif pourrait être souhaitable
    },
  },
});

const fetchCategories = async () => {
  console.log('Récupération des catégories d\'actualités...'); // Ne sera enregistré qu'une seule fois
  const res = await fetch('/api/news/categories');
  if (!res.ok) throw new Error('Échec de la récupération des catégories');
  return res.json();
};

const fetchHeadlinesByCategory = async (category) => {
  console.log(`Récupération des titres pour : ${category}`); // Sera enregistré par catégorie
  const res = await fetch(`/api/news/headlines?category=${category}`);
  if (!res.ok) throw new Error(`Échec de la récupération des titres pour ${category}`);
  return res.json();
};

function CategorySelector() {
  const { data: categories } = useQuery({ queryKey: ['newsCategories'], queryFn: fetchCategories });
  return (
    <ul>
      {categories.map((category) => (
        <li key={category.id}>{category.name}</li>
      ))}
    </ul>
  );
}

function TrendingTopics() {
  const { data: categories } = useQuery({ queryKey: ['newsCategories'], queryFn: fetchCategories });
  const trendingCategory = categories.find(cat => cat.isTrending)?.name || categories[0]?.name;
  
  // Ceci récupérerait les titres pour la catégorie tendance, partageant les données de la catégorie
  const { data: trendingHeadlines } = useQuery({ 
    queryKey: ['headlines', trendingCategory], 
    queryFn: () => fetchHeadlinesByCategory(trendingCategory),
  });

  return (
    <div>
      <h3>Actualités Tendances dans {trendingCategory}</h3>
      <ul>
        {trendingHeadlines.slice(0, 3).map((headline) => (
          <li key={headline.id}>{headline.title}</li>
        ))}
      </ul>
    </div>
  );
}

function AppContent() {
  return (
    <div>
      <h1>Centre d'Actualités Mondial</h1>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
        <section>
          <h2>Catégories Disponibles</h2>
          <CategorySelector />
        </section>
        <section>
          <TrendingTopics />
        </section>
      </div>
    </div>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Suspense fallback={<div>Chargement des données d'actualités globales...</div>}>
        <AppContent />
      </Suspense>
    </QueryClientProvider>
  );
}

            

              
                Copy