Full static generated Nuxt in v2.9.0

Full static generated Nuxt in v2.9.0

Nuxt.js has always provided a flexibility in the way an application can be delivered. The nuxt-generate looks very promising at first up until the moment you realize you are only half-way there. What do I mean by that?

Nuxt prior v2.9.0 – by the time this is written

Nuxt provides two component methods `asyncData` and `fetch` which allow you to make the necessary requests to feed you components with data. If your app is universal (ssr+spa) or spa-only everything is good and works great. If however you decide to pre-render your entire app with $ nuxt generate one would expect that all data will be fetched at build time and no asyncData/fetch calls with be made during runtime. Unfortunately this isn’t the case with nuxt-generate. All generate does is pre-render but it doesn’t alter the way user navigation is handled. Every route change (users clicks an inner page link, etc) is handled as usual – as SPA.

When can pre-render be useful then? It can be, in fact, it can be very useful. Think of it as full document cache. It can provide your site will excellent cold load times. That’s the first load of every user session, during which all app assets are downloaded plus the rendered HTML for that page. In universal mode nuxt has to generate this HTML content upon request which could significantly impact your TTFB period. Nuxt generate can eliminate this by pre-rendering a static html file for every publicly accessible landing page.

Support for fully static generated content might come in v2.9.0 !

From what the issue page for the RFC tells us efforts are being made to merge the changes and deliver the feature with the next minor 2.9. It will introduce a generate.static option to use in nuxt-config that will no more require a working asyncData/fetch for already generated routes.

It will essentially produce static site similar to what GatsbyJS produces. We are excited to see this feature merge and test it out.