Handling thousands of custom routes from a database in Nuxt.js

I have a Nuxt JS (v3) application with thousands of custom routes, many pointing to the same pages, but at the domain root.

e.g /some-product-name-one, /a-secondary-product-name, /some-category-name, /some-static-page.

So in this case, the slug can be anything at domain root level, which is why i must fetch it from my database to assert which component is to be used.

What i've done is fetch all the routes (about 27.000) from my Database via. an API on build in my app/router.options.ts so it looks like so:

import type { RouterOptions } from '@nuxt/schema'

export default <RouterOptions> {
    routes: (_routes) => [
        {
            name: 'product_some-product-name-one',
            path: '/some-product-name-one',
            component: () => import('~/pages/product.vue'),
            props: {
                id: '2421'
            }
        },
        {
            name: 'category_some-category-name',
            path: '/some-category-name',
            component: () => import('~/pages/category.vue'),
            props: {
                id: '45'
            }
        },
        {...}
    ]
}

Now, the build time was 10 minutes and the application is extremely slow. Navigating to the website timed out.

How can i fetch routes from my database in Nuxt.js and send the user to the correct component?