Skip to content
This repository has been archived by the owner on Sep 25, 2021. It is now read-only.

Turbolinks double loading pages #403

Closed
rickapichairuk opened this issue Jul 24, 2018 · 7 comments
Closed

Turbolinks double loading pages #403

rickapichairuk opened this issue Jul 24, 2018 · 7 comments

Comments

@rickapichairuk
Copy link

Hello!

After watching the Turbolinks 5: I Can’t Believe It’s Not Native! by Sam Stephenson talk, I was so inspired that I am trying to build a hybrid app using turbolinks!

I am using Rails, Turbolinks and Vue.js and eventually plan to use turbolinks-ios and turbolinks-android to build hybrid apps on top of the rails/turbolinks/vue.js app.

I am using the following software and versions:

    ruby 2.5.1
    rails (5.2.0)
    turbolinks (5.1.1)
      turbolinks-source (~> 5.1)
    turbolinks-source (5.1.0)

Right now I have an issue where turbolinks keeps on making double requests.

On one of the pages, we have a Google Maps modal which allows the user to select their location and then redirects to another page via Vue.js (using Turbolinks.visit(url) and the following is logged to Google Chrome's developer tools Network view:

  1. A request is correctly made to the products page:
  | e.send | @ | application-df220ce….js:5
  | e.issueRequest | @ | application-df220ce….js:6
  | e.visitStarted | @ | application-df220ce….js:5
  | e.start | @ | application-df220ce….js:6
  | e.startVisit | @ | application-df220ce….js:6
  | e.historyPoppedToLocationWithRestorationIdentifier | @ | application-df220ce….js:6
  | e.onPopState | @ | application-df220ce….js:5
  | (anonymous) | @ | application-df220ce….js:5

After that, requests for favicon.ico and other product related images are made. And after the page seems to have been "loaded", another request is made to GET products again except this time it seems to be a reload:

  | e.reload | @ | application-df220ce….js:5
  | e.pageInvalidated | @ | application-df220ce….js:5
  | e.viewInvalidated | @ | application-df220ce….js:6
  | e.invalidateView | @ | application-df220ce….js:5
  | t.render | @ | application-df220ce….js:5
  | e.render | @ | application-df220ce….js:5
  | e.renderSnapshot | @ | application-df220ce….js:6
  | e.render | @ | application-df220ce….js:6
  | e.render | @ | application-df220ce….js:6
  | (anonymous) | @ | application-df220ce….js:6
  | (anonymous) | @ | application-df220ce….js:6
  | requestAnimationFrame (async) |   |  
  | e.render | @ | application-df220ce….js:6
  | e.loadResponse | @ | application-df220ce….js:6
  | e.visitRequestCompleted | @ | application-df220ce….js:5
  | e.requestCompletedWithResponse | @ | application-df220ce….js:6
  | (anonymous) | @ | application-df220ce….js:5
  | e.endRequest | @ | application-df220ce….js:5
  | e.requestLoaded | @ | application-df220ce….js:5
  | (anonymous) | @ | application-df220ce….js:5

This does not seem like the expected behavior. I would expect that only one request is made and that the head section is merged and the new body is rendered.

What would cause turbolinks to do a reload?
@ccasabona
Copy link

Turbolinks 5.2.0 is causing all the links on a Rails 5.2.1 site to fire twice. To debug this, we removed all javascript from the source, then jquery, then rails-ujs, then bootstrap, and so on. We tried adding 'data-no-turbolinks' to the link_to tags and then to the body tag. We tried rolling back versions of Turbolinks to 5.1 and 5.0 to no avail. Nothing fixed this except to remove Turbolinks entirely which is where we stand right now.

@ccasabona
Copy link

Follow up on my previous comment. Our problem was solved by changing 'data-turbolinks-track' => 'reload' in the stylesheet_include_tag and javascript_incude_tag to 'data-turbolinks-track' => 'false'. Links are firing only once and Turbolinks is back in the project.

@pensebien
Copy link

pensebien commented Aug 28, 2018 •
edited

I have tried to follow @ccasabona but I discovered that now I am running the problem of not having 'data-turbolinks-track' => 'reload' advantage which means not all my css and js get to load.

@domchristie
Copy link
Collaborator

Hi @rickapichairuk! Thanks for your detailed description, and glad to hear that you've been inspired to give Turbolinks a go :)

Full reloads occur when tracked assets in the <head> change (see Reloading When Assets Change). So to avoid this, make sure your <head> assets (e.g. scripts and styles) do not change between page loads.

Sometimes this can be caused by third-party libraries like the Google Maps API. This case has been discussed here (with possible solutions): #165

Hope that helps.

@Tcheetox
Copy link

I might be late on this topic, but what did the trick for me was to add the below in the <head>
<meta name="turbolinks-cache-control" content="no-cache">

Read more

@pensebien
Copy link

@Tcheetox that is good since it worked for you. Did you check that all the JS compiles before the reload action?

@ccasabona
Copy link

ccasabona commented Nov 23, 2020 via email

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@domchristie @rickapichairuk @pensebien @ccasabona @Tcheetox