Dynamic data not rendering in prerender-spa-plugin

The prerender-spa-plugin is used to prerender static HTML files for your Vue.js application, which can improve the performance of your app and make it more SEO-friendly. However, the plugin won't be able to render dynamic data because the data is generated at runtime, and the prerendering process happens before the app is actually loaded and run in a browser.

One way to work around this issue is to use a technique called "hydration." Hydration is the process of taking prerendered HTML and "rehydrating" it into a fully-functional Vue.js app. When the prerender-spa-plugin generates the static HTML, it will include special "hydration" markers to indicate where dynamic data should be inserted. When the app is loaded in the browser, it will "hydrate" these markers with the actual data, making the app fully functional.

Here is one example of how you can use this technique with the prerender-spa-plugin:

First, you need to add a script to your index.html file that will start the hydration process:

<script>window.__PRERENDER_INJECTED = true</script>

Then, in your main.js file, you need to check if the __PRERENDER_INJECTED variable is present and use the hydrate method from the vue-server-renderer package instead of the createApp method:

import { createApp } from 'vue'import { createRenderer } from 'vue-server-renderer'import App from './App.vue'const renderer = createRenderer()

if (window.__PRERENDER_INJECTED) {
  const app = createApp(App)
  renderer.renderToString(app, (err, html) => {
    if (err) throw err
    renderer.hydrate(html, app)
  })
} else {
  createApp(App).mount('#app')
}

This way it will only hydrate the data when the app is prerendered. Otherwise, it will just mount the app as normal.

However, it's important to note that you need to be careful when using this technique, as it can be a little tricky to get right. You will also need to make sure that the data is properly formatted and ready to be inserted into the HTML when the app is hydrated.