Questions about prefetching

[jochenthomas]

Describe your problem 🧐

Hi,
I have some noob questions, please bear with me.

I want to preload pages and show them in a slider (or any other animation).
I use the following config with the parallel + preload plugin:

const swup = new Swup({
  containers: ["#swup"],
  cache: true,
  plugins: [
    new SwupParallelPlugin({
      keep: 3, --> thought this will keep the prefetched page in cache...
    }),
    new SwupPreloadPlugin({ 
      preloadInitialPage: true,
      // preloadVisibleLinks: true, --> deactivated to avoid fetching again and again
    }),
		new SwupA11yPlugin(),
		new SwupDebugPlugin(),
  ]
});
// swup.preloadLinks(); --> not activated to avoid fetching again and again

In addition, I am using data-swup-animation and data-swup-preload on the links outside of the #swup/main container.

Most important question now, 1)
I thought the prefetched pages would be available immediately.
Still; at every click on the link, the pages are prefetched repeatedly (see console).
This leads to roughly 2s delay (because of the slow server response).
How can I avoid this (tried "keep: 3 - but this isn't changing the delay)?
Is there something like a TTL to define the time without prefetching again?
I've provided a link where I am currently testing.

I have on each side a back-button outside of the swup-container.
The first loaded page renders the button, but the other buttons of the sub/next-pages will not overwrite this button.
Putting them inside the container will animate them - therefore not useful.
I have seen the fragment plugin. Is this the expected way to go forward to change the button text and button link?
Or is there any other simpler way (maybe javascript swup.hooks.before and changing the inner-HTML is faster)?

Every page is fully loaded - but only a smaller fraction is needed to change the content of the swup-container.
My understanding: You fully load the HTML page and filter out the swup container.
If I create only an HTML document with the swup-container - will this speed up the load time?
What happens if someone accesses the direct link to the sub-page (then he will see only the container fragment)?

What is your question? 🙋‍♀️

see above

1. how to avoid prefetching if a page is already in the cache
2. recommendation to change button text and link
3. general understanding: is using only the main container adviseable

URL to minimal reproduction 🔗

https://projekt-sanierung.de/test_crisis_management_00/

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for answers to my question
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[daun]

The keep option of the Parallel Plugin keeps the old dom nodes of previous containers around. It has no relation to preloading.

Uncommenting/reenabling the preloadVisibleLinks line should do the trick here. If the server is super slow, that will slow it down further, but the solution here would rather be server caching.

For updating little things outside of containers, either add those elements to the containers (if they exist on every page) or use the Morph Plugin (can‘t link on mobile, but Google should turn it up).

As for the last question: swup requires the full html to be present. Partial payloads are no longer supported since they complicate things (like history navigation and reloads like you mentioned). To speed up the response, it‘s better to look into server caching.

[jochenthomas]

I can't put the back button inside the container as it would animate/swipe them in. But they should stay in the same position.
In addition, the text + href will change, so I'll check the morph plugin.
Caching comes of course; but after finished dev. All possible conventional optimization options should be used beforehand ;-)
Regarding full HTML versus payloads - I wondered to myself about the topics you mentioned -- not ideal but understood.

[daun]

I meant adding the back button as another container beside the main container. That way, both get updated. If you don't add an animation class to that container, it won't be animated.

new Swup({ containers: ['main', '.back-button'] })

[daun]

The reason your pages are preloaded multiple times is that the links are redirected from /page to /page/. Swup currently doesn't cache redirected requests as that would lead to falsely cached data. If you use the correct urls with trailing slash, it should work as expected however.

[jochenthomas]

Oh, yes - you are right. I read this, but did not act ;-)
Thanks for the super fast answer.