The new version of Nuxt.js brings a 'static' target property. But Nuxt has already generated static Jamstack sites, so why would we want to specify it explicitly?
Martin MakarskyPublished on Sep 21, 2020
Nuxt provides you with several ways to run your application. You can have a classic single page application, super-fast static site, or even a server-side rendered app. In the beginning, it might be a good idea to briefly distinguish among them.
- Server Side Rendered (SSR) - This one is also called universal or isomorphic. The main difference is in the rendering, which happens purely on the Node.js server. Its biggest advantage, when compared to the SPA, is far better SEO support.
- Static Site - Trendy (Jamstack), fast, cheap, secure, and performing. All HTML pages are pre-rendered at the build time and are served from CDN. Of course, itʼs not a silver bullet for all use cases and is not suitable for some projects.
After the initial research when you clarify which rendering is the right choice for your project, itʼs time to configure
nuxt.config.js —the main config file for your Nuxt.js app. There are three main config properties that specify the behavior of your app: target, mode, and ssr.
Youʼve got two options for the target property:
static. It might be helpful to think about the target property as a hosting environment—whether you need:
- a server, or
- just a CDN to serve static files.
Despite the fact itʼs called
target: 'server' and the old documentation said thatʼs for server-side rendering, it doesnʼt literally mean your app is server-side rendered. This was really obfuscating for me. For this purpose, Nuxt.js has additional
ssr properties, but weʼll get to that.
When using the
target: 'server', your production app will need a server environment where the response for the clientʼs request is composed and is sent.
On the other hand, when using the
target: 'static' in a production environment, you just need a CDN that will serve your static files. These static files are prepared at the build time and are final (until the next build with updated content or code). There is no need for any server in this scenario (other than CDN and build server, which will probably be in your CI pipeline).
This option is available from version
2.14.0. Before this release, the old approach had had some issues and difficulties, mainly with the client requesting your API via
fetch functions for your navigation. As a result, the generated site was not purely static whatsoever. All the drawbacks of the old approach are described in the official documentation.
With the new
target: 'static' (and mandatory
ssr: 'true' at the same time) approach, the
nuxt generate command will pre-render all your HTML pages and mocks async data requests. That old
fetch are not requesting your API from the client this time. This was already being performed during the build time.
Server or static choice?
It might be a little bit tricky for newcomers to decide whether to use server-side rendering or static. A good question that might help you make the decision is: Do you need to provide different content for each page/document/content item for different users/circumstances? If so, you should probably go with the
server target, otherwise
Each of these approaches has got its pros and cons, such as server requirement, security, speed, CI pipeline/build process, SEO, price, etc.
Mode and ssr
If you are familiar with Nuxt.js, you probably know there are two available values for the
mode property -
mode: 'universal' and
mode: 'spa'. According to the latest documentation, they were deprecated in favor of
ssr: 'true' and
This option was deprecated, you should use the
ssr: 'true' instead.
This option was deprecated, you should use the
ssr: 'false' instead.
With this option, your app is server-side rendered. This is the default value.
ssr: 'false' option, there is no server-side rendering (only client-side navigation), and the whole app runs as a single page application. This mode is not available in combination with the
target: 'static' option.
TL;DR: Available commands and rendering
Full static works only with
target: 'static' and
ssr: 'true' (counterpart of deprecated
mode: 'universal'). The
ssr: 'true' is a default value. The
ssr: 'false' is a counterpart of the deprecated
mode: 'spa' and cannot be used with
Also, there are several commands available out of the box by Nuxt.js. Some of them are available with some deployment targets only. Moreover, the table below shows the possible
ssr combinations with the respective result application.
Feeling like your brand’s content is getting lost in the noise?
Listen to our new podcast for practical tips, tricks, and strategies to make your content shine. From AI’s magic touch to content management mastery and customer experience secrets, we’ll cover it all.Listen now