InstantClick (Turbo-Prefetch) in Rails 8: A Quick Guide

Introduction

Ruby on Rails 8 introduces several exciting features aimed at enhancing the developer experience and improving application performance. One such feature is InstantClick (Turbo-Prefetch), which significantly speeds up page navigation by preloading pages before the user clicks on links. In this blog post, we will demonstrate what InstantClick does, explain why you should use it, and show you how to disable it if necessary.

What is InstantClick (Turbo-Prefetch)?

InstantClick (Turbo-Prefetch) is a feature that leverages the power of Turbo (formerly TurboLinks) to preload pages when the user hovers over a link, making page transitions nearly instantaneous. This prefetching mechanism enhances the user experience by reducing the perceived latency between page navigations.

Demo:

Without InstantClick:
- User clicks on a link.
- Browser sends a request to the server.
- Server processes the request and responds with the new page.
- Browser renders the new page.
With InstantClick:
- User hovers over a link.
- Browser prefetches the page in the background.
- User clicks on the link.
- Prefetched page is displayed almost instantly.

Why Should I Use InstantClick?

Enhanced User Experience:
- Faster page transitions lead to a smoother and more responsive user experience.
Reduced Load Time:
- By prefetching pages, the perceived load time is reduced, making your application feel faster.
Improved Engagement:
- Users are more likely to stay on your site and navigate through multiple pages when the experience is seamless.
Competitive Advantage:
- Faster navigation can give you a competitive edge, as users tend to prefer websites that load quickly and efficiently.

How to Use InstantClick

Rails 8 enables InstantClick by default if you are using Turbo. To take advantage of this feature, ensure that you have Turbo set up in your Rails application.

Add Turbo to Your Application:
If you haven’t already, add Turbo to your Gemfile:

   gem 'turbo-rails'

Install Turbo:
Run the following command to install Turbo:

   bundle install
   rails turbo:install

Enable InstantClick:
InstantClick is enabled by default with Turbo, so you don’t need to do anything extra. Your links will automatically use the prefetch feature.

How to Disable InstantClick

If you need to disable InstantClick for any reason, you can do so by modifying the Turbo configuration.

Disable Globally:
To disable the InstantClick feature globally without disabling the entire Turbo functionality, you can add a meta tag in your application layout.

<!DOCTYPE html>
<html>
<head>
  <title>MyApp</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= javascript_include_tag "application", "data-turbo-track": "reload" %>
  <%= stylesheet_link_tag "application", media: "all", "data-turbo-track": "reload" %>
  <meta name="turbo-prefetch" content="false">
</head>
<body>
  <%= yield %>
</body>
</html>

Disable for Specific Links:
To disable InstantClick for specific links, add the data-turbo-prefetch attribute to the link tag.

   <%= link_to "My Link", my_path, data: { turbo_prefetch: false } %>

Conclusion

InstantClick (Turbo-Prefetch) in Rails 8 is a powerful feature that can significantly improve the user experience by making page transitions faster and more seamless. While it is enabled by default, you have the flexibility to disable it globally or for specific links if needed. Embracing this feature can provide a competitive edge and enhance the overall performance of your application.

Source link
lol