Static Site Generation and SSR with NuxtJS, VueJS style

Last week I talked to you about SSR in my article titled "What is SSR or Server-Side Rendering?"

I recommend reading it if the concept of SSR is not familiar to you.

So you know the benefits of SSR in terms of SEO and performance optimization, but how can you take advantage of it while still benefiting from the power of already existing front-end frameworks?

This is where the NuxtJS framework comes into play, sitting on top of VueJS in order to bring new features, including new rendering methods.

If you're a React developer, there are equivalents such as NextJS (SSR) or Gatsby (Static), which will not be covered in this article.

Why add a layer on top of VueJS?

As I already explained on the blog, VueJS is not a framework in the strict sense of the term, but rather a front-end library based on a model-view-controller architecture and powered by web components.

NuxtJS therefore allows you to develop perfectly structured projects as well as add additional native features such as:

• Deploying an application in SSR
• Static generation of the application
• Abstraction of client and server code
• Management of "single file components" .vue
• ES6/ES7/Typescript compatibility thanks to a built-in version of Babel

Or even numerous other additional features available thanks to a myriad of official modules or those supported by the community, such as for example:

• Google Analytics tracking integration
• Automated sitemap generation
• Component implementation of the most popular CSS libraries
• Internationalization
• Toast notifications
• etc...

You can find the list of all available modules on the following website: https://modules.nuxtjs.org/

SSR vs Static

NuxtJS natively implements two new ways of deploying your VueJS projects, each with its own benefits. To create a NuxtJS project, simply run the tool designed for this purpose and follow the questions you'll be asked:

npx create-nuxt-app my-project

> project: my-project
> language: Javascript
> packet manager: yarn
> UI framework: Tailwind CSS
> NuxtJS modules: axios
> Linting tools: ESLint
> Testing framework: Jest
> Rendering mode: SSR
> Deployment target: Server (NodeJS)
...

Once generated, to launch your Nuxt project in SSR mode, all you need to do is run the following command: npm run dev

And to ask NuxtJS to generate the entire application statically, meaning composed only of html, css files and a JS bundle, simply type the following command: npm run generate

And there you go! It's done, and within a few minutes you'll have been able to create a NuxtJS application running in SSR or hostable on a static file server!

All that's left for you to do is slightly modify your existing VueJS project to migrate it to Nuxt and benefit from all the previously mentioned features.