Caching on page leave #169

New Issue

2018-06-25T10:16:42-05:00

tafelnl commented

2018-06-25 10:16:42 -05:00

(Migrated from github.com)

I just started using this PJAX library and I already love it.

There is just one thing I think that would make this library even better:

I have several scripts that load content in my pages dynamically. For example profile pictures that are lazy loaded and several AJAX calls to my REST API that result in new DIV being added to the page.

When a user clicks away from a page and then hits the back button, all these content has to be added again. But imagine an option where when the user clicks away from a page, the current state is being cached. That would (in my case at least, and maybe for others as well) result in an even faster browser experience.

I would love this feature, and when I have some time left can maybe even look into making this myself. But I don't know this library very well (literally started using it today) so some directions to get me started would be awesome.

I just started using this PJAX library and I already love it. There is just one thing I think that would make this library even better: I have several scripts that load content in my pages dynamically. For example profile pictures that are lazy loaded and several AJAX calls to my REST API that result in new DIV being added to the page. When a user clicks away from a page and then hits the back button, all these content has to be added again. But imagine an option where when the user clicks away from a page, the current state is being cached. That would (in my case at least, and maybe for others as well) result in an even faster browser experience. I would love this feature, and when I have some time left can maybe even look into making this myself. But I don't know this library very well (literally started using it today) so some directions to get me started would be awesome.

BehindTheMath commented

2018-06-27 14:43:00 -05:00

(Migrated from github.com)

I don't think it makes sense for Pjax to implement this, since Pjax's goal has nothing to do with AJAX calls made by the webpage.

It should be easy to implement this yourself though. Just store the AJAX responses in top level variables, and check if there's data there before making the AJAX call.

I don't think it makes sense for Pjax to implement this, since Pjax's goal has nothing to do with AJAX calls made by the webpage. It should be easy to implement this yourself though. Just store the AJAX responses in top level variables, and check if there's data there before making the AJAX call.

tafelnl commented

2018-07-04 11:06:02 -05:00

(Migrated from github.com)

Yes that is an option too. But I think you maybe kind of misunderstood the situation I was trying to sketch. Because when one stores the response in a top level variable, you would still have to load these variables in the DOM.

If you store the complete state of a page on page leave, everything will already be there, and therefore the page will load faster.

Also, does this library actually make use of cache (like Barba.js does for example) in the first place? Because I cannot seem to find it.

Yes that is an option too. But I think you maybe kind of misunderstood the situation I was trying to sketch. Because when one stores the response in a top level variable, you would still have to load these variables in the DOM. If you store the complete state of a page on page leave, everything will already be there, and therefore the page will load faster. Also, does this library actually make use of cache (like Barba.js does for example) in the first place? Because I cannot seem to find it.

BehindTheMath commented

2018-07-04 14:53:13 -05:00

(Migrated from github.com)

Yes that is an option too. But I think you maybe kind of misunderstood the situation I was trying to sketch. Because when one stores the response in a top level variable, you would still have to load these variables in the DOM.

If you store the complete state of a page on page leave, everything will already be there, and therefore the page will load faster.

Pjax uses history.pushState() to save the state. This occurs when the page is loaded, not when you leave it.

The goal of Pjax is not to be a full-featured front-end framework. Its goal is simply to use AJAX instead of loading a new page when clicking a link or submitting a form, but to keep the UX the same.

In your case, if the script runs when the page is loaded, move that code to a separate JS file, and put the script tag for it in the content that is requested for that URL. It should be executed by Pjax along with the content.

Also, does this library actually make use of cache (like Barba.js does for example) in the first place? Because I cannot seem to find it.

Pjax does not have its own cache mechanism (see #26). HTTP requests are cached automatically by the browser.

>Yes that is an option too. But I think you maybe kind of misunderstood the situation I was trying to sketch. Because when one stores the response in a top level variable, you would still have to load these variables in the DOM. >If you store the complete state of a page on page leave, everything will already be there, and therefore the page will load faster. Pjax uses `history.pushState()` to save the state. This occurs when the page is loaded, not when you leave it. The goal of Pjax is not to be a full-featured front-end framework. Its goal is simply to use AJAX instead of loading a new page when clicking a link or submitting a form, but to keep the UX the same. In your case, if the script runs when the page is loaded, move that code to a separate JS file, and put the script tag for it in the content that is requested for that URL. It should be executed by Pjax along with the content. >Also, does this library actually make use of cache (like Barba.js does for example) in the first place? Because I cannot seem to find it. Pjax does not have its own cache mechanism (see #26). HTTP requests are cached automatically by the browser.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: iLoveElysia/pjax#169