SSR with dynamic attributes

[xdursoc11]

I'm using SSR + PWA mode for my webapp but I have a problem while settings dynamic attributes to meta tags. In one of my component using prefetch (preFetch: true, in my quasar config file):

async preFetch ({ store, currentRoute, previousRoute, redirect, ssrContext, urlPath, publicPath }) {
    console.log("currentRoute:", currentRoute);
    console.log("Fetching investor data for ID:", currentRoute.params.id);

    const investorStore = useInvestorStore(store)
    await investorStore.fetchInvestor(currentRoute.params.id);

    let investor = investorStore.investor;
    if (investor) {
      console.log(investor.investorName)
    }

    const metaData = {
      title: investor.investorName,
      meta: {
        keywords: { name: 'keywords', content: "Investor" },
        ogType: {
          property: 'og:type',
          content: 'website'
        },
        ogTitle: {
          property: 'og:title',
          content: investor.investorName
        },
        ogImage: {
          property: 'og:image',
          content: sharksMeta
        },
        ogUrl: {
          property: 'og:url',
          content: 'https://test.com/detail/INV/' + investor.id
        }
      }
    };

    useMeta(metaData);

    return { investor }
  }

I tried to retrieve the data of my entity in order to customize the preview when I'm share a link for example.
The route of my page is:

{ path: 'detail/:parameter/:id', name: 'detail', component: () => import('pages/DetailPage.vue') },
https://test.com/detail/INV/xxx-xxx-xxx

I host my app on a ECS container. The problems is that the logs are not present in the container and the preview of the
link is wrong with empty title etc...
If I don't use prefetch feature and static attributes all works fine, I can obtain a decent preview but not personalized for each entity for example.

[satish123satish123]

did you get any solution?

[xdursoc11]

Hi, yes, I found the solution.

[satish123satish123]

can you please share the solution? I have same issue in my quasar ssr web app

[xdursoc11]

<template>
  <q-page class="flex">
    <component :is="dynamicComponent"></component>
  </q-page>
</template>

<script setup>

// IMPORTS

const invStore = useInvStore()

const route = useRoute();
let inv = ref(invStore.investor)

defineOptions({
  async preFetch ({store, currentRoute}) {
    const parameter = currentRoute.params.parameter;

    if (parameter === 'RE') {
      //TODO
    } else if (parameter === 'INV') {
      const investorStore = useInvestorStore(store)
      await investorStore.fetchInvestor(currentRoute.params.id);
    } 
    ......... OTHER STUFFS
  }
})

const setMetaTags = (entity) => {
  let title, description;

  const type = route.params.parameter;

  switch (type) {
    case 'INV':
      title = entity.name;
      description = 'Inv from XXXXXXXX';
      break;
    default:
      title = 'Empty object'
      description = 'Detail .....';
  }

  let imageUrl = `https://xxxxxxxx`;

  if (type === 'INV') {
    imageUrl = "xxxxxxx";
  }

  const metaData = {
    title,
    description,
    meta: {
      keywords: { name: 'keywords', content: title },
      ogType: {
        property: 'og:type',
        content: 'website'
      },
      ogTitle: {
        property: 'og:title',
        content: title
      },
      ogDescription: {
        property: 'og:description',
        content: description
      },
      ogImage: {
        property: 'og:image',
        content: imageUrl
      },
      ogUrl: {
        property: 'og:url',
        content: `https://xxxxxxxxxx/detail/${type}/${entity.id}`
      }
    }
  };

  useMeta(metaData);
};


const dynamicComponent = computed(() => {
  const parameter = route.params.parameter;

if (parameter === 'INV') {
    setMetaTags(inv.value)
    return DetailInv;
  } else {
    return DetailDefault;
  }
});
</script>

Remeber to use the Metatags plugin of Quasar. Add it into the quasar config