Home > OS >  NuxtJS: Static render just a component instead of 1000's of pages
NuxtJS: Static render just a component instead of 1000's of pages

Time:07-31

I have a Nuxt architecture question - Having never built a Nuxt site before. We have a website with potentially 1000's of pages. We would like to leverage the power of Static Rendering. The CMS, which is hosted on a different server, will trigger a static re-render of the page via WebHooks. When a new page is created, the main nav may need to change. That means the entire site will need to be re-generated, and with so many pages that could take a very long time. So what is the work around for this? Can you statically render just the main nav and include it all pages, to avoid re-rendering absolutely everything? ...so partial static rendering?

CodePudding user response:

Depending on where you're hosting your code, you could use ISG: https://youtu.be/4vRn7yg85jw
There are several approaches of solving that yourself too, but it will require some work of course.

Nuxt team is currently working on solving this issue with something baked in: https://github.com/nuxt/framework/discussions/560

You could maybe also optimize some of those pages or look to split them in different projects as told here: https://stackoverflow.com/a/69835750/8816585

Batching the regeneration could be an idea too, or even using the preview feature to avoid some useless builds: https://nuxtjs.org/docs/features/live-preview#preview-mode

Overall, I'm not sure that there is magic solution with a perfect balance between SSR and SSG as of today without a decent amount of work. Of course, if you're using Go Vite or alike, you will get faster builds overall but it's a quite broad/complex question overall.

  • Related