Infinite Scroll and back navigation

1

Hi all,

I’m working on implementing infinite scroll in a Rails application using Turbo Frames and Turbo Streams. I have set up a basic structure as follows:

index.html.erb

erb

<%= turbo_frame_tag "card_body_frame", class: "card-body" do %>
  <%= turbo_frame_tag "xx_table_frame", src: xx_path(format: "turbo_stream", params: { query: params[:query] }), loading: "lazy" %>
  <%= turbo_frame_tag "xx_pagination" %>
<% end %>

index.turbo_stream.erb

erb

<%= turbo_stream.append("xx_table_frame") do %>
  <%= render partial: 'xx_row', collection: @xx, as: :xx %>
<% end %>

<% if @pagy.next.present? %>
  <%= turbo_stream.replace "xx_pagination" do %>
    <%= turbo_frame_tag "xx_pagination", src: xx_path(format: "turbo_stream", params: { query: params[:query], page: @pagy.next }), loading: "lazy" %>
  <% end %>
<% end %>

Issue: I am encountering a problem with the back navigation after visiting an individual item page. When the user hits the back button, a new GET request to the index is fired, and the content is rendered again via index.turbo_stream.erb. This results in the first set of items being appended again to the end of the page, which is not the desired behavior. It seems that the requests are not idempotent.

Question: How should I manage this back navigation issue? Is there a standard way to handle it? Do I need to manually check if items are already rendered to prevent duplication?

Any guidance or pointers to a standard solution would be greatly appreciated!