Static Site Generators

Static site generators are tools that allow Single-page applications to be pre-rendered as HTML files before being deployed to the server. This allows for near instant page load times, no flash of unstyled content, improved SEO and more.

The process in first glance is similar to SSR, with the difference that instead of a node script generating each page, we have have a headless browser, loading app routes and saving the result as static HTML files. This allows you to get almost all the advantages of SSR, without the disadvantages. Websites can then be served with any static-file-hosting solution, like Github pages or Netlify. Most websites can benefit from pre-rendering without the need for SSR.

Pre-rendering is not a silver bullet and has some caveats:

  • Many routes - Pre-rendering is not suitable for websites with thousands of routes. Each page would have to be rendered, which can take quite some time.
  • Dynamic Content - Routes that display user specific content or other dynamically fetched data, should show placeholders until the content is loaded.

Summary (TLDR)

Existing Solutions

Even though you can create such a tool with Puppeteer and a simple script, there are already battle tested solutions that can work for the majority of use cases.

Vuepress popular

Vuepress is a prime example of a static file generator. Each page is a markdown file that is then rendered to an HTML page, and runs as an SPA once a page is loaded. Vuepress 0.x websites are meant mainly for documentations, as the default theme is optimized for such.

The new 1.x version will be a more generic static file generator, suitable for building blogs and more. Its new plugin based system allows for a much wider range of extensions, on top of the already available offline mode, Algolia search integration to name a few.

Gridsome rising star

Gridsome is a Vue.js-powered, static site generator for building fast websites. It works with any Headless CMS, API or Database by using a GraphQL Data Layer. Once visited, Vue.js hydrates the page, converting it into a full blown SPA.

To learn more, go check out the Gridsome page.

Prerender SPA Plugin

A webpack plugin that is used to generate static HTML files for each web page, defined in its configuration. Opposed to the previous two solutions, this one is framework agnostic, meaning it is not limited to just Vue powered websites.

Nuxt Static Generated mode popular

Most people know Nuxt for its Server-side rendering capabilities, it however also supports pre-rendering. The nuxt generate command will save the output of each page in your Nuxt app to an HTML file. After visiting, the page will go into SPA mode, with Vue taking over routing and page rendering.

NuxtPress newcomer

NuxtPress is an addon for Nuxt (thus it also supports pre-rendering) which adds the ability to create Nuxt pages as .md files.

There currently exist 3 modes: docs, blog & slides (experimental) and so it is already quite versatile.

Since it's just a Nuxt module, one major benefit is that you have all the power and flexibility of vanilla Nuxt (and its ecosystem) at your fingertips.

Poi + vue-static

Using the vue-static plugin for Poi by EGOIST, you can leverage pre-rendering for each route of your SPA at build time. You need to give it a map of your dynamic routes and it will do the rest. Keep in mind it uses vue-server-renderer, so all limitations of SSR will apply here as well (no window object so on).

This approach is useful for simpler applications, which when bundled with Poi, can get pre-rendering almost for free.

Saber

Saber.js is a framework for building Modern Static Websites, also built by EGOIST. You can think of it as Gridsome or Gatsby but without the GraphQL part. It is very easy to get started with, like Nuxt.js it uses file-system as the routing API and it supports .md and .vue pages out of the box, however you can also add pages programmatically. Saber has first-class support for blogging, theming, i18n and page transition, it's also highly extensible thanks to the plugin system.

For now Saber only works with Vue.js, but React support is planned for the future.