ssr: why i don't found the value of {{ test }} in the source page

[AkliOnet]

there is something i don't understand, in my template app.vue i put an interpolation like this

{{ this.test }}

<script> export default { name: 'App', components: { }, data() { return { test : 'hello' ) } } </script>

i do : quasar dev - m ssr
all thing seems ok , no error on the terminal and no error on chrome , just a Hydration completed but contains mismatches error.

and the problem is that hello is not in the source page (ctrl+u on chrome)

[dongwa]

You can only find it when first visiting the page. After hydration is completed, it will change to a single-page application (SPA).
In other words, SSR (Server-Side Rendering) only comes into effect during the initial page rendering.

[dongwa]

I can't understand what you're saying, but if you want to verify the content rendered by Quasar SSR, you can use the curl tool to request your domain or press Ctrl + R in the Chrome browser's source code page to force a page reload. Then, you will see the page with the content.

[dongwa]

well when i do ctrl+u , chrome open the page that it received , and i don't found hello in it ?

When you press Ctrl+U, the hydration may already be completed, so you may not see the initial rendered page. Instead, you can try the method I mentioned above.

[AkliOnet]

no the hello is not in the html page retrieve with a wget . i did noting special : all my app is just in src/app.vue and i have done quasar dev -m ssr. and i placed some console.log in the created method to check that the code is well executed server side but there is a problem with the rendering of the template with the data object. where can i place some check to check that vue rendered the template as a string like in the guide https://vuejs.org/guide/scaling-up/ssr.html#rendering-an-app and that quasar is not the one who cause the problem ?

[dongwa]

no the hello is not in the html page retrieve with a wget . i did noting special : all my app is just in src/app.vue and i have done quasar dev -m ssr. and i placed some console.log in the created method to check that the code is well executed server side but there is a problem with the rendering of the template with the data object. where can i place some check to check that vue rendered the template as a string like in the guide vuejs.org/guide/scaling-up/ssr.html#rendering-an-app and that quasar is not the one who cause the problem ?

I tested Quasar and there was no problem. Maybe there was a mistake on your end.
There is my test:

<template>
  <div>{{ msg }}</div>
  <button @click="count++">{{ count }}</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      msg: 'hello',
    };
  },
};
</script>

my chorme source code page:

my curl test:

[AkliOnet]

yes the problem was that i was writing this. test intead of test . thank you for your check and help

[rstoenescu]

Do not use this.* in your SFC template (you used {{ this.test }}). Directly mention the variables in your component scope.

// not like this:
{{ this.test }}

// but like this:
{{ test }}

[AkliOnet]

hooo yes !!! this is the problem ! thank you

[AkliOnet]

so i had to write {{ test }} but also clear the page now i see the hello .

ok now the problem is that i spend yesterday the entire journey to understand how to make my axios call executed before rendered that is called with the help of

ssrContext.rendered = () => {
console.log("rendered");
}

i prefer the hook created that the hook prefetch because my component methods are not available in prefetch and i have to redo all the code of my method in prefetch. how to wait for the created method to finish . i tried with a promise like this

...
async created() {
    console.log("created");
    await this.fetchTranslation();
  },
methods: {
    fetchTranslations() {
          return new Promise((resolve, reject) => {
this.translation = my axios call ...

console.log("translation: "+this.translation);
resolve()
    }
},
  preFetch ({ssrContext}) {

    ssrContext.rendered = () => {
      console.log("rendered");
    }

  },

but the problem is that "rendered" is printed before the "translation :"

edit: ok if there is a prefech method it's that it's the way to do it . let me try a promise in prefetch ... so to pass the data retrieve from axios i have to use a store ... let me try with pinia ...

[dongwa]

You can call axios in prefetch and cache the result's data to your store (Pina or Vuex). Then, you can use the data from the store in your create method.

[AkliOnet]

ok i added pinia and a store . but just before i can test the pinia store i got an error concerning axios in prefetch , i added a boot file for axios automatically but how to make it available in prefetch.

because in the guide it say
app.config.globalProperties.$axios = axios
// ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
// so you won't necessarily have to import axios in each vue file

but in the prefetch page of the guide it say
Usage
The hook is defined as a custom static function called preFetch on our route components. Note that because this function will be called before the components are instantiated, it doesn’t have access to this.

so how do i fetch the data with axios ? when i do this.$axios.get(... i get : Cannot read properties of undefined (reading 'get')

[TobyMosque]

a note, u can expose the axios globaly, as long u don't modify your defaults with user info:
for exemple, this is bad:

import axios from 'axios'
import { boot } from 'quasar/wrappers'

const api = axios.create({ /*...*/ })
export function updateToken() {
  api.defaults.headers.common.Authorization = getTokenSomehow();
}
export default boot(function ({ app, store }) {
  updateToken()
  app.config.globalProperties.$api = api
})
export { api }

this is also bad.:

import axios from 'axios'
import { boot } from 'quasar/wrappers'

const api = axios.create({ /*...*/ })
export default boot(function ({ app, store }) {
  api.interceptors.request.use(function (config) {
    const token = getTokenSomehow();
    if (token) {
      config.headers ||= {};
      config.headers.Authorization = token;
    }
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });
  app.config.globalProperties.$api = api
})
export { api }

said that, what i recommend is:

import axios from 'axios'
import { boot } from 'quasar/wrappers'

export const apiKey = 'api-key'
export default boot(function ({ app, store }) {
  const api = axios.create({ /*...*/ })
    
  app.provide(apiKey, api)
  // this line is very important, without that u can't acess the api in the actions
  store.use(() => ({ api }))
  
  /*
  api.interceptors.request.use(function (config) {
    const token = getTokenSomehow();
    if (token) {
      config.headers ||= {};
      config.headers.Authorization = token;
    }
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });
  */
})

so, u'll be able to access your api in the components like that:
options api

import { defineComponent } from 'vue'
import { apiKey } from 'src/boot/api'

export default defineComponent({
  inject: {
    api: apiKey
  },
  methods: {
    async fetch () {
      const { data } = await this.api.get('...')
    }
  }
})

composition api

<script setup>
import { inject } from 'vue'
import { apiKey } from 'src/boot/api'

const api = inject(apiKey)
async function fetch () {
  const { data } = await this.api.get('...')
}
</script>

now, let's talk about the preFetch itself, since u'll not be able to inject anything here, u would do all your async stuff in the action.:
here a example of the pinia store with async stuff (options and setup syntaxes):
options api

import { defineStore } from 'pinia'
export const useMyStore = defineStore('my', {
  state: () => ({
    list: []
  }),
  actions: {
    async fetch () {
      const { data } = await this.api.get('...')
      this.list = data;
    }
  }
})

setup store

import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useMyStore = defineStore('my', () => {
  const list = ref([])
  async function fetch () {
    const { data } = await this.api.get('...')
    list.value = data;
  }
  return {
    list,
    data
  }
})

finally, the preFetch example:
options api

import { defineComponent } from 'vue'
import { preFetch } from 'quasar/wrappers'
import { mapStores } from 'pinia'
import { useMyStore } from 'src/stores/my'

export default defineComponent({
  preFetch: preFetch(async ({ store }) => {
    const myStore = useMyStore(store)
    await myStore.fetch()
  }),
  mounted() {
    console.log(this.myStore.list)
  },
  computed: {
    ...mapStores(useMyStore)
  }
})

composition api

<script>
import { defineComponent } from 'vue'
import { preFetch } from 'quasar/wrappers'
import { useMyStore } from 'src/stores/my'

export default defineComponent({
  preFetch: preFetch(async ({ store }) => {
    const myStore = useMyStore(store)
    await myStore.fetch()
  })
})
</script>
<script setup>
import { onMounted } from 'vue'
import { useMyStore } from 'src/stores/my'
import { storeToRefs } from 'pinia'

const myStore = useMyStore()
const { list } = storeToRefs(myStore)
onMounted(() => {
  console.log(list.value)
})
</script>

[AkliOnet]

really nice answer/ help I am going to test that ! as soon as i found a solution concerning pinia : I'm struggling with it , it slowed down my application when I replace the value of an empty array with an array with ~100 objects which themselves contain about 60 objects each. I would like to know if it is possible to change a state without triggering all this mutations or avoiding using a store because it slows down my application

[TobyMosque]

I don't know how pinia is slow down your app here, but handle a large amount of data is a challenge, so maybe u would paginate that inside a QInfiniteScroll

[AkliOnet]

i solved my pinia speed problem and i installed everything following your examples and all ssr , axios and pinia work fine . a big thank to you.