Ruby on Rails offers powerful tools for handling large datasets and presenting them in user-friendly ways. In this article, I’ll share six advanced techniques for implementing efficient pagination and infinite scrolling in Rails applications. These methods will help you optimize performance, enhance user experience, and handle large volumes of data with ease.

1. Cursor-based Pagination

Cursor-based pagination is an efficient technique for handling large datasets. Instead of using page numbers, it uses a unique identifier (cursor) to keep track of the current position in the result set. This approach is particularly useful for datasets that change frequently or when dealing with real-time data.

To implement cursor-based pagination in Rails, we can use the following approach:

class PostsController < ApplicationController
  def index
    @posts = Post.where("id > ?", params[:cursor].to_i).limit(20)
    @next_cursor = @posts.last&.id
  end
end

In the view, we can display the posts and include a link for loading more:

<% @posts.each do |post| %>
  <div class="post"><%= post.title %></div>
<% end %>

<% if @next_cursor %>
  <%= link_to "Load More", posts_path(cursor: @next_cursor), remote: true %>
<% end %>

This method is highly efficient as it doesn’t require counting the total number of records, which can be a costly operation for large datasets.

2. Lazy Loading with Kaminari

Kaminari is a popular pagination gem for Rails that supports lazy loading. Lazy loading allows us to defer the loading of content until it’s needed, which can significantly improve initial page load times.

First, add Kaminari to your Gemfile:

gem 'kaminari'

Then, in your controller:

class PostsController < ApplicationController
  def index
    @posts = Post.page(params[:page]).per(20)
  end
end

In your view, you can use Kaminari’s helpers to display pagination links:

<%= paginate @posts %>
<% @posts.each do |post| %>
  <div class="post"><%= post.title %></div>
<% end %>

To implement lazy loading, we can use JavaScript to load more content when the user scrolls to the bottom of the page:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       loadMorePosts();
   }
});

function loadMorePosts() {
    var nextPage = $('.pagination .next a').attr('href');
    if (nextPage) {
        $.getScript(nextPage);
    }
}

3. Optimizing Database Queries

Efficient pagination often requires optimizing database queries. One technique is to use database-specific features for faster offset calculations.

For MySQL, we can use the SQL_CALC_FOUND_ROWS and FOUND_ROWS() functions:

class PostsController < ApplicationController
  def index
    @page = params[:page].to_i
    @per_page = 20

    @posts = Post.connection.select_all(<<-SQL)
      SELECT SQL_CALC_FOUND_ROWS *
      FROM posts
      LIMIT #{@per_page}
      OFFSET #{(@page - 1) * @per_page}
    SQL

    @total_count = Post.connection.select_value('SELECT FOUND_ROWS()')
    @total_pages = (@total_count.to_f / @per_page).ceil
  end
end

This approach allows us to get the total count without running a separate COUNT query, which can be slow for large tables.

4. Keyset Pagination

Keyset pagination is another efficient method for handling large datasets. It uses a unique, sortable column (often a timestamp or auto-incrementing ID) to determine the next set of results.

Here’s an example implementation:

class PostsController < ApplicationController
  def index
    @per_page = 20
    @posts = Post.order(created_at: :desc)
                 .where("created_at < ?", params[:last_created_at])
                 .limit(@per_page)

    @last_created_at = @posts.last&.created_at&.iso8601
  end
end

In the view:

<% @posts.each do |post| %>
  <div class="post"><%= post.title %></div>
<% end %>

<% if @last_created_at %>
  <%= link_to "Load More", posts_path(last_created_at: @last_created_at), remote: true %>
<% end %>

This method is particularly efficient for datasets that are frequently updated, as it doesn’t rely on absolute positions in the result set.

5. Infinite Scrolling with Turbolinks

Turbolinks, which comes bundled with Rails, can be used to implement smooth infinite scrolling. This technique loads new content as the user scrolls, providing a seamless browsing experience.

In your controller:

class PostsController < ApplicationController
  def index
    @page = params[:page].to_i || 1
    @posts = Post.page(@page).per(20)
  end
end

In your view:

<div id="posts">
  <%= render @posts %>
</div>

<% if @posts.next_page %>
  <%= link_to "Load More", posts_path(page: @posts.next_page), id: "load-more" %>
<% end %>

<%= javascript_pack_tag 'infinite_scroll' %>

In your JavaScript file (app/javascript/packs/infinite_scroll.js):

document.addEventListener("turbolinks:load", function() {
  var loadMoreLink = document.getElementById("load-more");
  
  if (loadMoreLink) {
    window.addEventListener("scroll", function() {
      var rect = loadMoreLink.getBoundingClientRect();
      var isAtBottom = rect.top <= window.innerHeight && rect.bottom >= 0;
      
      if (isAtBottom) {
        loadMoreLink.click();
      }
    });
  }
});

This setup will automatically load more posts as the user scrolls to the bottom of the page, providing a smooth infinite scrolling experience.

6. Caching for Improved Performance

Caching can significantly improve the performance of pagination, especially for frequently accessed pages. We can use Rails’ built-in caching mechanisms to store paginated results.

In your controller:

class PostsController < ApplicationController
  def index
    @page = params[:page].to_i || 1
    @posts = Rails.cache.fetch("posts_page_#{@page}", expires_in: 1.hour) do
      Post.page(@page).per(20).to_a
    end
  end
end

This approach caches each page of results for an hour, reducing database load for frequently accessed pages.

For more granular caching, we can cache individual posts:

<% @posts.each do |post| %>
  <%= cache post do %>
    <div class="post"><%= post.title %></div>
  <% end %>
<% end %>

This method allows for efficient updates when individual posts change, without invalidating the entire page cache.

Implementing efficient pagination and infinite scrolling in Ruby on Rails applications requires a combination of back-end optimization and front-end techniques. By using cursor-based pagination, we can handle large, frequently changing datasets without performance issues. Lazy loading with Kaminari allows us to defer content loading, improving initial page load times.

Optimizing database queries is crucial for handling large datasets efficiently. Techniques like using SQL_CALC_FOUND_ROWS can significantly reduce query time. Keyset pagination provides another efficient method for large datasets, particularly those that are frequently updated.

Infinite scrolling, implemented with Turbolinks, can greatly enhance user experience by providing seamless content browsing. Finally, proper use of caching can dramatically improve performance, reducing server load and response times.

These techniques, when applied appropriately, can significantly improve the performance and user experience of Rails applications dealing with large amounts of data. As with any optimization, it’s important to profile your application and understand your specific use case to choose the most appropriate pagination strategy.

Remember, the key to efficient pagination is not just in the implementation of these techniques, but also in understanding your data and how users interact with it. Regular monitoring and adjustment of your pagination strategy will ensure your Rails application remains performant as it scales.