Turbolinks & Kirby

Kirby 2 Questions 🤔
1

Hey there folks,
has anyone tried out Turbolinks together with Kirby, and if so, would be willing to share his experiences, possible caveats, stuff to look out for?

Greatly appreciated,
cheers

S1SYPHOS

1 Like
2

I have and it works great! No change required on Kirby’s side.

3

@pedroborges you have a link to where you use it together with Kirby? What are the benefits of implementing it in your opinion? Thx!

4

Hi @bvdputte, here are two examples:

As I said, there’s no change required on Kirby’s side but there are a few things to consider on HTML and Javascript, but they are well explained on the Turbolinks documentation. The main changes to my projects were:

  • Move script tags to the head section (otherwise they are reevaluated on every page load).
  • When listening to load or DOMContentLoad events, also listen to turbolinks:load.
  • Disable links that are intercepted with Javascript by adding the data-turbolinks="true" attribute.
5

i have had my quick try of this… i really like the concept of turbolinks and it’s very easy to begin with, however when working with sessions and forms it’s very counter productive, had gotten immediate problems with it even though using the no caching meta tag for certain pages did not seem to do what i wanted so… i would give it a shot on projects which consist of mostly just static pages

6

Thx. I haven’t looked at it much in detail (yet), but I still cannot see how it’s gonna be faster then the default browser behaviour? It looks like it fetches everything in via XHR, right? Default browser behaviour is it fetches everything in immediately?

Besides that, you have to load in the extra JS required to do so, have the browser parse it, and you have to account for all edge cases and cross browser inconsistencies (as stated above by @carstengrimm)…

1 Like
7

My understanding is that Turbolink hijacks internal links to prevent the browser from doing a normal page load, instead it fetches the HTML content via XHR, replaces the whole body tag and diff the HEAD tag to replace only what’s changed (title, meta tags, …).

The main speed gain comes from the browser not having to fetch and parse the same CSS/JS/Fonts to render them for every page (even with those assets cached, parsing and rendering takes time, specially for big stylesheets and scripts).

I didn’t have any issue with regular forms that redirect back to the same page. The docs explain what to do when a form submission needs to redirect to a different page, which causes issues as mentioned by @carstengrimm.

1 Like