Scroll infinito
O curso monta um scroll infinito numa aplicação Rails usando ferramentas que ela já tem. Começa comparando a paginação por offset com Pagy ao scroll infinito e mostra onde cada um se encaixa. Depois trata do IntersectionObserver e do padrão da sentinela, dos Turbo Frames com escopo e carga sob demanda, e do padrão de carregar mais com Turbo Streams da thread de comentários. Um controller Stimulus reutilizável junta essas peças. As aulas finais cuidam de carregamento, erros, restauração da rolagem, SEO e acessibilidade, e acompanham o fluxo completo da consulta ao conteúdo renderizado.
O que você vai aprender
- ✓Quando usar paginação, um botão de carregar mais ou scroll infinito
- ✓Detectar o fim da lista com IntersectionObserver e um elemento sentinela
- ✓Acrescentar registros com Turbo Streams e o padrão buscar N+1, usar N
- ✓Construir um controller Stimulus de scroll infinito reutilizável
- ✓Tratar carregamento, erros, restauração da rolagem, SEO e acessibilidade
- ✓Testar o fluxo completo com testes de sistema
Paginação vs scroll infinito
Uma página web com 500 registros não consegue renderizar todos de uma vez. Há duas soluções: a paginação, que divide os registros em páginas separadas entre as quais o usuário navega, e o scroll infinito, que carrega mais registros conforme o usuário rola até o fim. Cada padrão tem prós e contras,…
Ler a aula completa grátis →Currículo
7 aulasPaginação vs scroll infinito
Compara a paginação por offset com Pagy ao scroll infinito e mostra onde cada padrão se encaixa.
IntersectionObserver: o detector de scroll
Explica como o IntersectionObserver e um elemento sentinela detectam quando o usuário chega perto do fim da lista.
Turbo Frames para conteúdo paginado
Mostra como Turbo Frames trocam só parte da página e por que o scroll infinito prefere Turbo Streams.
Turbo Streams append: o padrão de carregar mais
Analisa o botão de carregar mais da thread de comentários, que acrescenta registros com Turbo Streams.
Construindo um controller Stimulus de scroll infinito
Constrói um controller Stimulus reutilizável que observa uma sentinela, busca a próxima página e evita requisições duplicadas.
Casos de borda: carregamento, erros, restauração de scroll, SEO
Trata estados de carregamento, erros, restauração da rolagem, SEO e acessibilidade no scroll infinito.
Scroll infinito: juntando tudo
Acompanha um feed hipotético da consulta à resposta em Turbo Stream, com melhoria progressiva e testes de sistema.