vue.jsnuxt.jsserver-side-renderingprerender

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


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?


Solution

  • 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.