Set Dynamic Meta Tag Values in Vue3

Question

I am using below programming languages for my website.

Frontend: Vue3 Backend: Nextjs

I have one table which called meta_tags.

Structure of meta_tags

COL--> id , meta_tag_value, meta_tag_name VALUE-> 1 , Welcome to my home page , home_page

I have created one api to get meta value by page name in next js.

Api :-> api/meta-tag/{page_type}

What i want ? Basically i want meta tag value to be set before sending html to the browser. So it will help in SEO/sharing url or social media platform for pre titled with image and description about the page.

Below is the main.js file i have tried several third-party to accomplish this task. But i am not able to set the meta tag value initially. I have used vue-meta, useHead etc.

Can anyone guide me through this, How i can do SSR(Server side rendering) without using any framework. Any other method you can guide me.

`const html = './dist';
const port = 7006;
const apiUrl = '/api';
const bodyParser = require('body-parser');
const compression = require('compression');
const express = require('express');
var app = express();
app
    .use(compression())
    .use(bodyParser.json())
    .use(express.static(html))
    .use(function (req, res) {
        res.sendFile(__dirname + '/dist/index.html');
    })
    .listen(port, function () {
        console.log('Port: ' + port);
        console.log('Html: ' + html);
});`

Edit:

I got to know that it is not quite possible to do both ways static and dynamic in vue3 without using Nuxtjs etc. Also, there will be a delay in reflecting of meta tag value. And social media can not crawl it. I want someone's confirmation that Can I get meta tag values from APIs and put them in the head tag + dist folder should run the same rest. Just for the meta tag I want dynamic.