This is a quick example to help illustrate what a Rails 7 application does when Turbo Drive is enabled versus when it is disabled.
It is assumed you are using the following version of Ruby and Rails:
$ ruby --version
ruby 3.1.1p18 (2022-02-18 revision 53f5fc4236) [x86_64-darwin21]
$ rails --version
Rails 7.0.2.3First we spin up a simles Rails 7 app with some scaffolding:
$ rails new whatever
$ cd whatever
$ bin/setup
$ rails generate scaffold album title:string artist:string
$ rails db:migrate
$ rails serverLet's take a look at Turbo Drive intercepting link clicks and form submissions so that only changes to the page are rendered, avoiding reload every resource the page uses:
- Open your Web Browser
- Open the Inspector and switch to its Network tab
- Navigate to http://localhost:3000/albums
- Notice how there are requests to the main html document, CSS files, JS files and other resources
- Clear the Network History
- Click New Album
- Notice how there is only a fetch request to
/albums/newand no requests for the CSS files, JS files and other resources
- Notice how there is only a fetch request to
- Enter a Title and Artist, then click Create Album
- Notice how there is just a single fetch request (that happens to get redirect)
- Click Back to Albums
- Notice how there is just a single fetch request
Now we'll disable Turbo Drive and see how a Rails app previously worked without it:
- Open
app/javascript/application.jsand disable Turbo Drive by adding the following line to the bottom of the file:
Turbo.session.drive = false
- In your browser reload http://localhost:3000/albums
- Notice how there are requests to the main html document, css files, js files and other resources
- Clear the Network History
- Click New Album
- Notice how there are requests to the main html document, css files, js files and other resources
- Click Back to Albums
- Notice how there are requests to the main html document, css files, js files and other resources