Turbolinks/Pjax

Hi all,
New user here. I’m a fullstcak JS dev and when building server-side rendered apps, I always love to use Simple-Pjax (https://github.com/mitranim/simple-pjax) to improve the perceived performance.
Given the slowness I’ve seen with some Bubble apps, I think this would be a great addition and I’m tempted to pop it into a plugin to easily add it to sites.

However, I’m uncertain how Bubble handles things and re-runs JS, as I’d need to utilise Simple-Pjax’s before & after event listeners to re-run JS on the page.

Has anyone tried to add similar functionality to Bubble? If so, I’m interested in hearing your thoughts.

Many thanks in advance,
Niall.

Hello Niall,
Welcome to the community!


You can achieve the same result using the go to page action. You need to select the same page and add page URL parameters.

For instance, go to the same page with view=home. Then, select a group that should be visible for this case. Go to its conditional and add the following conditional:
When Get data from page URL (view) is home > this element is visible

Thanks for the reply @lottemint.md - but correct me if I’m wrong, this isn’t technically going to a new page, but simply using params to selectively show/hide DOM content that has already been loaded? Plus I don’t see how this utilises pushState.

Please advise.

Yes, correct. It just pushes states in the case if you choose the same page.
So, a user isn’t forced to wait until the elements will be loaded again.

Okay, but this isn’t the goal of using Pjax. Specifically, Simple-Pjax will fetch the new page (eg. /about) via XHR, extract everything between the <body>...</body> tags and replace the current page’s content with the newly fetched content, thus simulating a single-page app while you as the dev build a traditional server-side rendered app.

I’m not sure if it is a relevant one for the Bubble.
For instance, the Bubble do not render an element which isn’t initially visible.

I’m not sure you understand. This is in the context of developing a multiple page app, with page reloads, and not a single-page app that selectively shows/hides content either already existing within the DOM or dynamically adding/removing elements from the DOM without page reloads.

I’ve understood your idea. I’m just not sure if it will be comfortable to configure.
The Bubble also supports reusable elements that can be used on different pages.
It is easy to configure.

I’m not saying that it is a bad idea. I’m just sharing my opinion.

There’s nothing to configure, Simple-Pjax intercepts all links and does its magic. However, my main concern is with regards to JS that requires the DOM ready event.