Client only / SSG Dummy Data about quasar-app-extension-ssg

[freddy38510]

The initial data must be the same between the server and the client in order to avoid hydration mismatch.

If you want to change these data after hydration at client-side, you can use the onMounted Vue hook which will be executed only at-client side.

[freddy38510]

I will try to provide you a simple example based on your needs @adzbuck

Here it is https://stackblitz.com/edit/quasarframework-vj5xbx?file=src/pages/IndexPage.vue

[adzbuck]

It's not so much changing the data, it's more I don't want to give my build server access to the API.
So I'd want api.xxx.com/example to be replaced with ./build-data/example.js

It would be a great feature if you could display something for SSG then it gets swapped out after hydration.
e.g. a sidebar with the users profile, for SSG It would display a skeleton loader/loader of some sort.. once it's hydrated it hit's the API and swaps it for the real content.

Is this possible at all?

[freddy38510]

In the example I provided the API is never accessed at server-side.

You can replace the initial data by a loading template then with v-if="data === null" and v-else you can switch to the "real content" as soon as the data are fetched at client-side from the onMounted hook.

Edit: I just updated the example, does this fit your needs ?

[adzbuck]

Ah ok, thank you.. I didn't realise onMounted didn't run on SSG. I can work with that. Thank you for your support.

[freddy38510]

You're welcome. Please just look at the updated example if you haven't already. It might help you.

I am closing this issue. Feel free to reopen or create issues if needed.