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

Issue

This Content is from Stack Overflow. Question asked by TechTimeGames

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?



Solution

Rather than baking all of the routes individually into the router, you might want to use a dynamic route such as _id.vue and handle the varying parameter within the component.


This Question was asked in StackOverflow by TechTimeGames and Answered by Toggle It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?