I had a hard time understanding prerendering, in my case done with vue.js and and the prerender spa plugin.
Technically it was working but I did not understand how google and others handle it.
After reading and testing quite a bit, I think I got it now:
let’s assume we have following files and routes:
- index.html (the dynamic vue.js)
- static (folder – the dynamic vue.js stuff)
- contact (folder – prerendered stuff)
- index.html (prerendered)
then there would be the route “about” which was not prerendered.
If I made changes to the content of a page (via a cms) after it was prerendered and I open up that page I could see the changes. So far so good, but what really confused me was that if I looked at the source code I saw the prerendered content without the changes.
So this means: if a prerendered route is opened in the browser, initially the prerendered content will load. Then immediately the vue.js magic kicks in and replaces the content with the dynamic content.
If a certain route has a prerendered page, this page will load. If not, e.g. for the route “about” it will fall back to the vue.js index.html loading the content dynamically – this is handled via the .htaccess file (https://router.vuejs.org/en/essentials/history-mode.html)
In the end I removed the transition classes during the pretender process in Prerender Spa Plugin settings in the webpack config:
renderedRoute.html = renderedRoute.html.replace(