Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

152
Vistas
A single payload.js for all nuxt static generate'd routes when data is the same

I have a NuxtJS site with only one page /pages/matrix/index.vue but quite a lot of dynamic routes pointing to this page, each route using the same set of data. When generating a static build for deployment on Netlify, the dist folder currently reaches ~1.2 GB, consisting of

  • 3125 .html files in dist/matrix (occupying ~39% of the space)
  • 3125 folders for payload.js files in dist/_nuxt/static/[random]/matrix/ in subfolders for routes (occupying ~61% of the space)

Those 61% are 3125 copies of a 220kB payload.js with exactly the same set of data: [{}], while only the route changes:

__NUXT_JSONP__("/matrix/place2/time3,time14,time29", (function(a, b, ...) {
    return {
        data: [{ /* data does not change */ }],
        fetch: {},
        mutations: void 0
    }
}("nor", "does", "this")));

I wonder if there is a way to reduce this redundancy by somehow extracting the data part? Reducing ~665 MB to just 220kB sounds alluring.

Some more background:

Routes are /matrix, /matrix/place1 or /matrix/place8/time1,time7,time18. When generating, I pull all data from a headless CMS and feed it to my page component via the payload option. First, I used File System Routing and imported the pages/matrix/index.vue like this:

// pages/matrix/_places/index.vue
<script>
  import Index from '../index'
  export default Index
</script>

which felt wrong but worked. I blamed this approach to the "duplication" of those payload files (frankly without completely understanding the mechanics of static generation). I now switched to extendRoutes with this nuxt.config.js setting:

router: {
  extendRoutes (routes, resolve) {
    routes.push(
      {
        name: 'matrix-place-times',
        path: '/matrix/:place/:times',
        component: resolve(__dirname, 'pages/matrix/index.vue')
      },
      {
        name: 'matrix-place',
        path: '/matrix/:place',
        component: resolve(__dirname, 'pages/matrix/index.vue')
      }
    )
  }
}

The amount of payload files spread across route subfolders stays the same.
Any advice on this? Using Nuxt v2.15.7.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Few things I can think about:

  • using SSR would solve some of those issues (you told that you wish to stay on Netlify tho)
  • using some aliased routes may be a good idea, especially if you have the exact same data at 2 differently named endpoints
  • this video also gives some leads regarding ISG or other ways to have more flexibility towards big page amounts
  • Nuxt3 is able to run on Cloudflare workers, this is not SSR nor exactly ISG but a middle ground, a different approach but it could render pages for not so expensive while being quick
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda