I am creating my project in vue and vite js for ssr. So far the server-side rendering works fine, like I could add a vue router to my project but render the content. I have tried importing the routes and making an app.use (routes) But it does not render the content of the routes, only the app.vue

My main.js

const { createServer } = require("vite");
const server = require("express")();
const fs = require("fs");
const path = require("path");

async function main() {
 const vite = await createServer({ server: { middlewareMode: true } });
 server.use(vite.middlewares);
 server.get("*", async (req, res) => {
let html = fs.readFileSync(path.resolve(__dirname, "index.html"), "utf-8");
const { render } = await vite.ssrLoadModule("/src/entry-server.js");
const appContent = await render();
html = html.replace("<!--ssr-->", appContent);
res.end(html);
});
server.listen(8080);
}

main();

My entry-server.js

import { createApp } from "vue";
import { renderToString } from "@vue/server-renderer";
import App from "./App.vue";

export async function render() {
 const app = createApp(App);
 const appContent = await renderToString(app);
 return appContent;
}

My entry-client.js

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");