/nuxt-static-site-generation

🗂 Source code for the Static Site Generation with Nuxt.js course

Primary LanguageVue

Static Site Generation with Nuxt.js

This repository contains the example code for the Static Site Generation with Nuxt.js course.

Prerendering or static site generation is an invaluable technique that every front-end developer should know. Compiling your application into static HTML files is a process that improves both performance and SEO. It can also drastically reduce your hosting cost.

Nuxt.js has made it easy for us to generate static sites of both static routes and dynamic routes, even with data loaded asynchronously.

After this course, you'll be familiar with:

  • What static site generation is
  • The difference between server-Side rendering and prerendering
  • How to prerender static routes
  • How to prerender dynamic routes
  • How to cache asynchronous data when generating dynamic routes

Prerendering is not the same as server-side rendering. If you want to learn about server-side rendering and Nuxt, check out our Async Data with Nuxt.js course. If you do not have experience with Nuxt.js yet, we recommend our Nuxt.js Fundamentals course.

This course is made together with Nuxt.js core member Alexander Lichter.

Click here to watch the course


Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn run dev

# build for production and launch server
$ yarn run build
$ yarn start

# generate static project
$ yarn run generate

For detailed explanation on how things work, checkout Nuxt.js docs.