Skip to main content

9 How To Use Turbolinks clearCache()

Episode 161 · December 5, 2016

Improve your Turbolinks implementation by using the clearCache method to reload pages

Turbolinks Javascript Frontend


# create.js.erb
Turbolinks.clearCache()

Transcripts

How to use Turbolinks clearCache()

In this episode, I want to talk about the Turbolinks clearCache() method and how you can use it to your advantage in your Rails applications. We'll first look at an example and discuss how this method can fix some inconsistencies resulting from Turbolinks.

We see that this episode here is marked incomplete. Clicking on the episode, we mark it as complete. This will tell the server that the episode is complete for that user. However, when we click the back button we'll see that the status still displays incomplete. If we refresh the page, the status now shows completed.

This is because the page is being loaded from the Turbolinks front end cache. We had just clicked the complete button to modify data on the server side, but Turbolinks is not aware of this change. To address this issue, we can modify the behavior of the complete button such that the Turbolinks cache is cleared.

Let's walk through what happens when clicking the complete button. First, the create action of the complete controller is called. This action responds with some JavaScript to update the button, and if the episode is within a series, it is also marked as complete. We can add the following line to the Javascript response (in this example, create.js.erb):

Turbolinks.clearCache();

This line instructs Turbolinks to load the page via server on the next page load. So in the example when we click the back button, the browser is now forced to reload the page via server instead of loading from the Turbolinks cache.

Using clearCache(), we'll see that the episodes page is now loading via server as indicated by the progress bar at the top. The page is no longer loaded from the Turbolinks cache, instead the page is requested again from the server. Users will now see their changes consistently across different requests.

The clearCache() method can be used within JavaScript responses where a resource is modified, i.e., for POST/PATCH/PUT/DELETE requests. Like our example, this will allow the user to see their changes reflected across different pages.

The clearCache() method comes from the Turbolinks Rails gem. The gem overrides the JavaScript behavior of a 302 redirect by adding a couple lines of code. Like we saw above, the first line clears the cache.

script << "Turbolinks.clearCache()"

The second line tells Turbolinks what page to display next.

script << "Turbolinks.visit(#{location.to_json}, #{visit_options.to_json})"

Now with Turbolinks enabled, whenever a redirect is made and the request is a JavaScript request, the two lines are automatically added to the response. This can be verified by inspecting the network tab in the browser's developer tools.

In conclusion, the Turbolinks clearCache() method can improve the user experience by getting rid of the inconsistencies that arise out of loading pages from cache. Thanks for watching and reading!

Written by Frank Lam

Discussion