Dominando o React Suspense: Elevando Aplicações Globais com Gerenciamento de Pool de Recursos de Carregamento de Dados Compartilhados

No vasto e interconectado cenário do desenvolvimento web moderno, construir aplicações performáticas, escaláveis e resilientes é fundamental, especialmente ao servir uma base de usuários diversa e global. Usuários em diferentes continentes esperam experiências fluidas, independentemente de suas condições de rede ou das capacidades de seus dispositivos. O React, com suas funcionalidades inovadoras, continua a capacitar desenvolvedores a atender a essas altas expectativas. Entre suas adições mais transformadoras está o React Suspense, um mecanismo poderoso projetado para orquestrar operações assíncronas, principalmente busca de dados e divisão de código, de uma forma que proporciona uma experiência mais suave e amigável ao usuário.

Embora o Suspense ajude inerentemente a gerenciar os estados de carregamento de componentes individuais, o verdadeiro poder emerge quando aplicamos estratégias inteligentes sobre como os dados são buscados e compartilhados em toda a aplicação. É aqui que o Gerenciamento de Pool de Recursos para o carregamento de dados compartilhados se torna não apenas uma boa prática, mas uma consideração arquitetural crítica. Imagine uma aplicação onde múltiplos componentes, talvez em páginas diferentes ou dentro de um único painel, todos requerem o mesmo dado – o perfil de um usuário, uma lista de países ou taxas de câmbio em tempo real. Sem uma estratégia coesa, cada componente poderia disparar sua própria requisição de dados idêntica, levando a chamadas de rede redundantes, aumento da carga no servidor, desempenho mais lento da aplicação e uma experiência subótima para os usuários em todo o mundo.

Este guia abrangente aprofunda-se nos princípios e aplicações práticas de como aproveitar o React Suspense em conjunto com um gerenciamento robusto de pool de recursos. Exploraremos como arquitetar sua camada de busca de dados para garantir eficiência, minimizar redundância e entregar um desempenho excepcional, independentemente da localização geográfica ou da infraestrutura de rede de seus usuários. Prepare-se para transformar sua abordagem ao carregamento de dados e desbloquear todo o potencial de suas aplicações React.

Entendendo o React Suspense: Uma Mudança de Paradigma na UI Assíncrona

Antes de mergulharmos no pooling de recursos, vamos estabelecer um entendimento claro do React Suspense. Tradicionalmente, o tratamento de operações assíncronas no React envolvia o gerenciamento manual de estados de carregamento, estados de erro e estados de dados dentro dos componentes, o que frequentemente levava a um padrão conhecido como "fetch-on-render". Essa abordagem podia resultar em uma cascata de spinners de carregamento, lógica de renderização condicional complexa e uma experiência do usuário abaixo do ideal.

O React Suspense introduz uma maneira declarativa de dizer ao React: "Ei, este componente ainda não está pronto para renderizar porque está esperando por algo." Quando um componente suspende (por exemplo, enquanto busca dados ou carrega um pedaço de código dividido), o React pode pausar sua renderização, mostrar uma UI de fallback (como um spinner ou uma tela de esqueleto) definida por uma fronteira <Suspense> ancestral e, em seguida, retomar a renderização assim que os dados ou o código estiverem disponíveis. Isso centraliza o gerenciamento do estado de carregamento, tornando a lógica do componente mais limpa e as transições de UI mais suaves.

A ideia central por trás do Suspense para Busca de Dados é que as bibliotecas de busca de dados podem se integrar diretamente com o renderizador do React. Quando um componente tenta ler dados que ainda não estão disponíveis, a biblioteca "lança uma promise". O React captura essa promise, suspende o componente e espera que a promise seja resolvida antes de tentar a renderização novamente. Esse mecanismo elegante permite que os componentes declarem suas necessidades de dados de forma "agnóstica aos dados", enquanto a fronteira do Suspense lida com o estado de espera.

O Desafio: Busca de Dados Redundante em Aplicações Globais

Embora o Suspense simplifique os estados de carregamento locais, ele não resolve automaticamente o problema de múltiplos componentes buscando os mesmos dados de forma independente. Considere uma aplicação global de e-commerce:

• Um usuário navega para a página de um produto.
• O componente <ProductDetails /> busca informações do produto.
• Simultaneamente, um componente de barra lateral <RecommendedProducts /> também pode precisar de alguns atributos do mesmo produto para sugerir itens relacionados.
• Um componente <UserReviews /> pode buscar o status da avaliação do usuário atual, o que requer o conhecimento do ID do usuário – um dado já buscado por um componente pai.

Em uma implementação ingênua, cada um desses componentes poderia disparar sua própria requisição de rede para os mesmos dados ou dados sobrepostos. As consequências são significativas, particularmente para um público global:

• Aumento da Latência e Tempos de Carregamento Mais Lentos: Múltiplas requisições significam mais viagens de ida e volta por distâncias potencialmente longas, exacerbando problemas de latência para usuários distantes de seus servidores.
• Carga Maior no Servidor: Sua infraestrutura de backend deve processar e responder a requisições duplicadas, consumindo recursos desnecessários.
• Desperdício de Largura de Banda: Usuários, especialmente em redes móveis ou em regiões com planos de dados caros, consomem mais dados do que o necessário.
• Estados de UI Inconsistentes: Condições de corrida podem ocorrer onde diferentes componentes recebem versões ligeiramente diferentes dos "mesmos" dados se atualizações acontecerem entre as requisições.
• Experiência do Usuário (UX) Reduzida: Conteúdo piscando, interatividade atrasada e uma sensação geral de lentidão podem afastar os usuários, levando a taxas de rejeição mais altas globalmente.
• Lógica Complexa do Lado do Cliente: Desenvolvedores frequentemente recorrem a soluções intrincadas de memoização ou gerenciamento de estado dentro dos componentes para mitigar isso, adicionando complexidade.

Este cenário ressalta a necessidade de uma abordagem mais sofisticada: Gerenciamento de Pool de Recursos.

Apresentando o Gerenciamento de Pool de Recursos para Carregamento de Dados Compartilhado

O gerenciamento de pool de recursos, no contexto do React Suspense e do carregamento de dados, refere-se à abordagem sistemática de centralizar, otimizar e compartilhar operações de busca de dados e seus resultados em toda a aplicação. Em vez de cada componente iniciar independentemente uma requisição de dados, um "pool" ou "cache" atua como um intermediário, garantindo que um dado específico seja buscado apenas uma vez e depois disponibilizado para todos os componentes que o solicitam. Isso é análogo a como pools de conexão de banco de dados ou pools de threads funcionam: reutilizar recursos existentes em vez de criar novos.

Os principais objetivos da implementação de um pool de recursos de carregamento de dados compartilhado são:

• Eliminar Requisições de Rede Redundantes: Se os dados já estão sendo buscados ou foram buscados recentemente, forneça os dados existentes ou a promise em andamento desses dados.
• Melhorar o Desempenho: Reduzir a latência servindo dados do cache ou esperando por uma única requisição de rede compartilhada.
• Aprimorar a Experiência do Usuário: Entregar atualizações de UI mais rápidas e consistentes com menos estados de carregamento.
• Reduzir a Carga no Servidor: Diminuir o número de requisições que atingem seus serviços de backend.
• Simplificar a Lógica do Componente: Os componentes se tornam mais simples, precisando apenas declarar seus requisitos de dados, sem se preocupar em como ou quando os dados são buscados.
• Gerenciar o Ciclo de Vida dos Dados: Fornecer mecanismos para revalidação, invalidação e coleta de lixo de dados.

Quando integrado com o React Suspense, este pool pode conter as promises das buscas de dados em andamento. Quando um componente tenta ler dados do pool que ainda não estão disponíveis, o pool retorna a promise pendente, fazendo com que o componente suspenda. Assim que a promise é resolvida, todos os componentes que esperam por essa promise serão re-renderizados com os dados buscados. Isso cria uma sinergia poderosa para gerenciar fluxos assíncronos complexos.

Estratégias para um Gerenciamento Eficaz de Recursos de Carregamento de Dados Compartilhado

Vamos explorar várias estratégias robustas para implementar pools de recursos de carregamento de dados compartilhados, desde soluções personalizadas até o aproveitamento de bibliotecas maduras.

1. Memoização e Caching na Camada de Dados

Em sua forma mais simples, o pooling de recursos pode ser alcançado através de memoização e caching do lado do cliente. Isso envolve armazenar os resultados das requisições de dados (ou as próprias promises) em um mecanismo de armazenamento temporário, prevenindo futuras requisições idênticas. Esta é uma técnica fundamental que sustenta soluções mais avançadas.

Implementação de Cache Personalizado:

Você pode construir um cache básico em memória usando o Map ou WeakMap do JavaScript. Um Map é adequado para caching geral onde as chaves são tipos primitivos ou objetos que você gerencia, enquanto o WeakMap é excelente para caching onde as chaves são objetos que podem ser coletados pelo garbage collector, permitindo que o valor em cache também seja coletado.

            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 a entrada se a busca falhar
      throw error;
    });

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

// Exemplo de uso com Suspense
let userData = null;
function readUser(userId) {
  if (userData === null) {
    const promise = fetchWithCache(`/api/users/${userId}`);
    promise.then(data => (userData = data));
    throw promise; // O Suspense capturará esta promise
  }
  return userData;
}

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

            

              
                Copy
              
            
          

Este exemplo simples demonstra como um dataCache compartilhado pode armazenar promises. Quando readUser é chamado várias vezes com o mesmo userId, ele retorna a promise em cache (se estiver em andamento) ou os dados em cache (se resolvidos), evitando buscas redundantes. O principal desafio com caches personalizados é gerenciar a invalidação, revalidação e os limites de memória do cache.

2. Provedores de Dados Centralizados e React Context

Para dados específicos da aplicação que podem ser estruturados ou requerem um gerenciamento de estado mais complexo, o React Context pode servir como uma base poderosa para um provedor de dados compartilhado. Um componente provedor central pode gerenciar a lógica de busca e caching, expondo uma interface consistente para que os componentes filhos consumam os dados.

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

const UserContext = createContext(null);

const userResourceCache = new Map(); // Um cache compartilhado para as promises de dados do usuário

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(); // Irá suspender se os dados não estiverem prontos

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

export function useUser() {
  const context = useContext(UserContext);
  if (context === null) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
}

// Uso nos componentes:
function UserGreeting() {
  const user = useUser();
  return <p>Olá, {user.firstName}!</p>;
}

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

function Dashboard() {
  const currentUserId = 'user123'; // Suponha que isso venha do contexto de autenticação ou de uma prop
  return (
    <Suspense fallback={<div>Carregando Dados do Usuário...</div>}>
      <UserProvider userId={currentUserId}>
        <UserGreeting />
        <UserAvatar />
        <!-- Outros componentes que precisam dos dados do usuário -->
      </UserProvider>
    </Suspense>
  );
}

            

              
                Copy
              
            
          

Neste exemplo, o UserProvider busca os dados do usuário usando um cache compartilhado. Todos os filhos que consomem o UserContext acessarão o mesmo objeto de usuário (uma vez resolvido) e suspenderão se os dados ainda estiverem carregando. Essa abordagem centraliza a busca de dados e os fornece declarativamente em toda uma subárvore.

3. Utilizando Bibliotecas de Busca de Dados Habilitadas para Suspense

Para a maioria das aplicações globais, criar manualmente uma solução robusta de busca de dados habilitada para Suspense com caching abrangente, revalidação e tratamento de erros pode ser um empreendimento significativo. É aqui que as bibliotecas dedicadas se destacam. Essas bibliotecas são projetadas especificamente para gerenciar um pool de recursos de dados, integrar-se perfeitamente com o Suspense e fornecer recursos avançados prontos para uso.

a. SWR (Stale-While-Revalidate)

Desenvolvida pela Vercel, a SWR é uma biblioteca leve de busca de dados que prioriza velocidade e reatividade. Seu princípio central, "stale-while-revalidate", significa que primeiro ela retorna os dados do cache (stale - obsoleto), depois os revalida enviando uma requisição de busca e, finalmente, atualiza com os dados frescos. Isso fornece um feedback de UI imediato, garantindo ao mesmo tempo a atualização dos dados.

A SWR constrói automaticamente um cache compartilhado (pool de recursos) com base na chave da requisição. Se múltiplos componentes usarem useSWR('/api/data'), todos eles compartilharão os mesmos dados em cache e a mesma promise de busca subjacente, gerenciando efetivamente o pool de recursos de forma implícita.

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

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

function UserProfile({ userId }) {
  // O SWR compartilhará automaticamente os dados e lidará com o Suspense
  const { data: user } = useSWR(`/api/users/${userId}`, fetcher, { suspense: true });
  return <h2>Bem-vindo, {user.name}</h2>;
}

function UserSettings() {
  const { data: user } = useSWR(`/api/users/current`, fetcher, { suspense: true });
  return (
    <div>
      <p>Email: {user.email}</p>
      <!-- Mais configurações -->
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<div>Carregando perfil do usuário...</div>}>
      <UserProfile userId="123" />
      <UserSettings />
    </Suspense>
  );
}

            

              
                Copy
              
            
          

Neste exemplo, se UserProfile e UserSettings de alguma forma solicitarem exatamente os mesmos dados de usuário (por exemplo, ambos solicitando /api/users/current), a SWR garante que apenas uma requisição de rede seja feita. A opção suspense: true permite que a SWR lance uma promise, deixando o React Suspense gerenciar os estados de carregamento.

b. React Query (TanStack Query)

A React Query é uma biblioteca mais completa de busca de dados e gerenciamento de estado. Ela fornece hooks poderosos para buscar, armazenar em cache, sincronizar e atualizar o estado do servidor em suas aplicações React. A React Query também gerencia inerentemente um pool de recursos compartilhado, armazenando os resultados das queries em um cache global.

Seus recursos incluem re-busca em segundo plano, tentativas inteligentes, paginação, atualizações otimistas e integração profunda com o React DevTools, tornando-a adequada para aplicações globais complexas e com uso intensivo de dados.

            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, // Os dados são considerados novos por 5 minutos
    }
  }
});

const fetchUserById = async (userId) => {
  const res = await fetch(`/api/users/${userId}`);
  if (!res.ok) throw new Error('Falha ao buscar usuário');
  return res.json();
};

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

function UserDashboard({ userId }) {
  return (
    <div>
      <h3>Painel do Usuário</h3>
      <UserInfoDisplay userId={userId} />
      <!-- Potencialmente outros componentes que precisam dos dados do usuário -->
    </div>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Suspense fallback={<div>Carregando dados da aplicação...</div>}>
        <UserDashboard userId="user789" />
      </Suspense>
    </QueryClientProvider>
  );
}

            

              
                Copy
              
            
          

Aqui, useQuery com a mesma queryKey (por exemplo, ['user', 'user789']) acessará os mesmos dados no cache da React Query. Se uma query estiver em andamento, chamadas subsequentes com a mesma chave aguardarão a promise em andamento sem iniciar novas requisições de rede. Esse pooling de recursos robusto é tratado automaticamente, tornando-o ideal para gerenciar o carregamento de dados compartilhados em aplicações globais complexas.

c. Apollo Client (GraphQL)

Para aplicações que usam GraphQL, o Apollo Client é uma escolha popular. Ele vem com um cache normalizado integrado que atua como um sofisticado pool de recursos. Quando você busca dados com queries GraphQL, o Apollo armazena os dados em seu cache, e queries subsequentes para os mesmos dados (mesmo que estruturadas de forma diferente) serão frequentemente servidas do cache sem uma requisição de rede.

O Apollo Client também suporta o Suspense (experimental em algumas configurações, mas amadurecendo rapidamente). Ao usar o hook useSuspenseQuery (ou configurar o useQuery para Suspense), os componentes podem aproveitar os estados de carregamento declarativos que o Suspense oferece.

            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 }) {
  // O cache do Apollo Client atua como o pool de recursos
  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 }) {
  // Outro componente usando dados potencialmente sobrepostos
  // O cache do Apollo garantirá uma busca eficiente
  const { data } = useSuspenseQuery(GET_PRODUCT_DETAILS, {
    variables: { productId },
  });
  const { product } = data;
  return (
    <div>
      <h3>Clientes também gostaram de {product.name}</h3>
      <!-- Lógica para exibir produtos relacionados -->
    </div>
  );
}

function App() {
  return (
    <ApolloProvider client={client}>
      <Suspense fallback={<div>Carregando informações do produto...</div>}>
        <ProductDisplay productId="prod123" />
        <RelatedProducts productId="prod123" /> 
      </Suspense>
    </ApolloProvider>
  );
}
```

import { queryClient } from './queryClientConfig'; // Suponha que o queryClient seja exportado
import { fetchUserDetails } from './api'; // Suponha uma função de API

// Exemplo: Pré-busca de dados do usuário ao passar o mouse
function UserLink({ userId, children }) {
  const handleMouseEnter = () => {
    queryClient.prefetchQuery({ queryKey: ['user', userId], queryFn: () => fetchUserDetails(userId) });
  };

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

// Quando o componente UserProfile renderizar, os dados provavelmente já estarão no 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(); // Armazena promises ou dados/recursos resolvidos
    this.subscribers = new Map(); // Rastreia componentes que esperam por um recurso
  }

  // Adquire um recurso (dados, conexão 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); // Notifica os componentes em espera
        },
        (e) => {
          status = 'error';
          result = e;
          this.notifySubscribers(key, e); // Notifica com erro
          this.pool.delete(key); // Limpa o recurso que falhou
        }
      );
    
    const resourceWrapper = { read() {
      if (status === 'pending') throw suspender;
      if (status === 'error') throw result;
      return result;
    }};

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

  // Para cenários onde os recursos precisam de liberação explícita (ex: WebSockets)
  release(key) {
    if (this.pool.has(key)) {
      // Executa a lógica de limpeza específica para o tipo de recurso
      // ex: this.pool.get(key).close();
      this.pool.delete(key);
      this.subscribers.delete(key);
    }
  }

  // Mecanismo para inscrever/notificar componentes (simplificado)
  // Em um cenário real, isso provavelmente envolveria o contexto do React ou um hook personalizado
  notifySubscribers(key, data) {
    // Implementa a lógica de notificação real, ex: forçar atualização dos inscritos
  }
}

// Instância global ou passada via Context
const globalResourceManager = new ResourcePoolManager();

// Uso com um hook personalizado para Suspense
function useResource(key, fetcherFn) {
  const resourceWrapper = globalResourceManager.acquire(key, fetcherFn);
  return resourceWrapper.read(); // Irá suspender ou retornar os dados
}

// Uso no componente:
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 por 10 minutos
      refetchOnWindowFocus: false, // Para apps globais, pode ser desejável uma re-busca menos agressiva
    },
  },
});

const fetchCategories = async () => {
  console.log('Buscando categorias de notícias...'); // Só registrará no console uma vez
  const res = await fetch('/api/news/categories');
  if (!res.ok) throw new Error('Falha ao buscar categorias');
  return res.json();
};

const fetchHeadlinesByCategory = async (category) => {
  console.log(`Buscando manchetes para: ${category}`); // Registrará no console por categoria
  const res = await fetch(`/api/news/headlines?category=${category}`);
  if (!res.ok) throw new Error(`Falha ao buscar manchetes para ${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;
  
  // Isso buscaria as manchetes para a categoria em alta, compartilhando os dados da categoria
  const { data: trendingHeadlines } = useQuery({ 
    queryKey: ['headlines', trendingCategory], 
    queryFn: () => fetchHeadlinesByCategory(trendingCategory),
  });

  return (
    <div>
      <h3>Notícias em Alta em {trendingCategory}</h3>
      <ul>
        {trendingHeadlines.slice(0, 3).map((headline) => (
          <li key={headline.id}>{headline.title}</li>
        ))}
      </ul>
    </div>
  );
}

function AppContent() {
  return (
    <div>
      <h1>Central de Notícias Global</h1>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
        <section>
          <h2>Categorias Disponíveis</h2>
          <CategorySelector />
        </section>
        <section>
          <TrendingTopics />
        </section>
      </div>
    </div>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Suspense fallback={<div>Carregando dados de notícias globais...</div>}>
        <AppContent />
      </Suspense>
    </QueryClientProvider>
  );
}
```