A paginação infinita carrega mais conteúdo conforme o usuário rola a página, sem cliques em "próxima". O resultado esperado: uma lista que cresce sozinha, com carregamento suave e sem travar o navegador. Antes de começar, você precisa de uma API que aceite parâmetros de página ou cursor, um contêiner de lista no HTML e controle básico de estado (itens carregados, offset, se ainda há dados).
Passo 1: Defina a estratégia de paginação da API
Escolha entre offset/limit ou cursor. Offset é mais simples: envie ?page=1&limit=20 e receba { items, total }. Cursor é mais robusto para dados que mudam: use ?after=id123&limit=20 e receba { items, nextCursor }. Evite misturar os dois. Erro comum: assumir que total é fixo e recalcular a cada requisição. Se os dados mudam com frequência, prefira cursor.
Passo 2: Detecte o fim da lista com IntersectionObserver
Em vez de ouvir o evento scroll (que dispara dezenas de vezes por segundo), coloque um elemento sentinela no final da lista e observe-o. Quando ele entra na viewport, dispare a busca. Código mínimo:
const observer = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) loadMore(); }); observer.observe(document.querySelector('#sentinela'));
Dica: desconecte o observer durante a requisição para não disparar várias buscas ao mesmo tempo. Erro comum: esquecer de desativar o observer após o último item, gerando loop infinito de requisições.
Passo 3: Anexe os novos itens sem quebrar a rolagem
Ao receber o lote, insira os elementos no final da lista. Preserve a posição de rolagem atual. Se usar frameworks como React ou Vue, mantenha uma chave única por item para evitar re-renderizações desnecessárias. Erro comum: substituir toda a lista em vez de anexar, o que faz a página pular para o topo.
Passo 4: Exiba estados de carregamento e fim de lista
Mostre um spinner ou texto "Carregando..." enquanto a requisição está em andamento. Quando não houver mais itens, exiba "Fim da lista" e desconecte o observer. Erro comum: não informar o fim, deixando o usuário rolar para sempre.
Checklist rápido
- API com parâmetros de página ou cursor definidos
- IntersectionObserver configurado no elemento sentinela
- Observer desconectado durante requisições e no fim da lista
- Novos itens anexados sem resetar a rolagem
- Indicador de carregamento visível
- Mensagem de fim de lista exibida
FAQ
O que é paginação infinita?
É uma técnica de carregamento progressivo em que novos itens são buscados e anexados automaticamente quando o usuário rola até o final da lista, sem cliques em botões de próxima página.
Qual a diferença entre paginação infinita e paginação tradicional?
A tradicional exibe links ou botões para navegar entre páginas. A infinita elimina essa navegação e carrega tudo em uma única rolagem contínua, o que pode dificultar o acesso ao rodapé.
Paginação infinita é ruim para SEO?
Pode ser, porque o conteúdo não tem URL própria. Para SEO, prefira paginação tradicional ou use URLs canônicas para cada página. A rolagem infinita é mais indicada para feeds e dashboards internos.
Como evitar múltiplas requisições simultâneas?
Use uma flag de controle (ex.: isLoading) e desconecte o observer enquanto a requisição estiver em andamento. Só reative após o término.
Qual o limite ideal de itens por requisição?
Não há número mágico. Teste com 10 a 30 itens. Lotes muito grandes aumentam o tempo de resposta e o consumo de memória; muito pequenos geram muitas requisições.
Preciso de biblioteca para implementar?
Não. IntersectionObserver é nativo e resolve a maioria dos casos. Bibliotecas como react-infinite-scroll-component ajudam, mas adicionam dependência. Avalie o custo-benefício.