We’ve been a big fan of NuxtJS for a while, although this is a bit odd for most of the WordPress community as React is the core of WordPress. However, we much prefer VueJS. So why conform to what WordPress has used?

This post is a follow up to our initial getting a flying start with TreacleWP and launching a headless WordPress site from start to finish.

NuxtJS out the box came with a few options on deploying:

1, SPA‚ this had no server side rendering, so everything was done client-side which didn’t help with SEO. Great for web apps, not so great for websites, which we at Treacle like to focus on.

2, UNIVERSAL, this added the server side rendering sauce, so you could create websites that performed well in Google. First request would be a static page which typically Google could read but also it was giving a fantastic TTFB, each subsequent page request would be client-side, so you’d request the API for each page. This can cause issues, but on the most part it’s just doing a basic server request.

One of the issues with this and WordPress is you could publish a post in WordPress, this wouldn’t display in Google or on the archive pages (first land), but it would suddenly show up when doing page requests, until you deployed again to re-create SSR. Best practice would typically be to use drafts, but this is an example of how you could run into issues.

Up until today there was no way of doing a truly static page request, some people would do a single large API request and store all their data, so each page change would request from the store, rather than the API, but that’s just not great for a scaling website.

To get started, make sure you’re using version 2.13

If you’re using our previous article, simply do the following to get up to date:

npm update nuxt

Next up, go into nuxt.config.js and add your target mode:

export default {
  mode: 'universal',
  target: 'static'
}

You’re ready to deploy, simply change your settings in Netlify or other services from:

$ npm run generate
// OR
$ yarn generate

to

npm run build && npm run export
// OR
nuxt build && nuxt export

At TreacleWP, this will help with high traffic limits, so if you think you’re reaching those, this will bring you back to zero essentially. Benefits of an always-on WordPress backend but also no over-usage limits.

You can read more information about going full static with NuxtJS here.