Paginate in Turbo Mode - Part 1

Replacing part of the screen using a Turbo Frame is a great way to keep your application more responsive. Lets add pagination without modifying the rest of the page as an example. We’ll start by setting up a basic page with pagination:

rails new pagination
cd pagination
bundle add faker
rails g model post title:string!
rails db:migrate
rails runner "1000.times { Post.create title: Faker::Book.title }"

class PostsController < ApplicationController
	def index
		# Dont do this. Use something like the pagy gem
		@count = Post.all.count
		@limit = 10
		@current_page = params[:page].to_i
		@prev_page = @current_page > 0 ? @current_page - 1 : nil
		@next_page = @count / @limit - 1 > @current_page ? @current_page + 1 : nil
		
		@posts = Post.all
			.limit(@limit).offset(@current_page * @limit)
			.order(title: :asc)
	end
end

<!-- app/view/posts/index.html.erb -->
<h1>Posts</h1>

<p><%= rand %></p>

<%= render @posts %>

<% if @prev_page %>
  <%= link_to "Prev", posts_path(page: @prev_page) %>
<% end %>

<% if @next_page %>
  <%= link_to "Next", posts_path(page: @next_page) %>
<% end %>

This is basic offset pagination. In a real application you would want to use something like Pagy for a number of reasons (performance, edge cases, nicer interface), but to keep this simple we’ll keep this all here. The random number is just to give us something simple on the page that will update on each load.

If this were part of a heavy page, there might be quiet bit of content being loaded. One way to avoid that loading cost would be to wrap different sections in a <turbo-frame src="" loading="src"> tag so that they are only loaded as needed and put the main posts list into a frame as well:

<!-- app/view/posts/index.html.erb -->
<h1>Posts</h1>

<p><%= rand %></p>

<%= turbo_frame_tag  "posts_wrapper" do %>
	<%= render @posts %>
	
	<% if @prev_page %>
	<%= link_to "Prev", posts_path(page: @prev_page) %>
	<% end %>
	
	<% if @next_page %>
	<%= link_to "Next", posts_path(page: @next_page) %>
	<% end %>
<% end %>

When you do this, the prev/next links will be intercepted by Turbo, loaded using fetch, and then the content in the response with the matching turbo frame id (posts_wrapper) will be extracted and inserted into the page, replacing the current content. Additionally, the URL will be updated meaning you’ll still have links you can bookmark or share.

Proof of this working is that the rand value no longer changes; magic!

One limitation of this process is that you cannot replace multiple things on the page. For that we need to use Turbo Stream. Wonder what we’ll be covering next time…

PS Bonus points if you can see the off-by-one-error in my controller.