# Paginação infinita: guia passo a passo para implementar

> A paginação infinita é uma técnica de interface que carrega novos itens automaticamente conforme o usuário rola a página, eliminando a necessidade de clicar em botões de próxima página. A implementação exige controle de estado, detecção de scroll e requisições assíncronas para evitar travamentos e preservar a performance.

*Bombou na Web · Tecnologia · 14 de setembro de 2026 · Wesley Tanaka*

A paginação infinita carrega mais conteúdo conforme o usuário rola. Neste guia, mostro o passo a passo para implementar sem travar a performance e ainda economizar tempo de desenvolvimento.

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.

---

Fonte (canonical): https://www.bombounaweb.com.br/tecnologia/paginacao-infinita-guia-passo-a-passo-para-implementar/