Should you use Static Site Generators (SSG)? Short answer is YES. Long answer is it depends on your content and expectation in terms of performance, SEO, cost, and developer experience.
Originally most websites are static with only HTML and CSS, then JavaScript was added to make them more interactive. Then web development getting more and more complicated with many server-side and client-side rendering frameworks which allows you to create dynamic websites connecting with databases.
But above rendering strategies have steep learning curve and sometimes overkill for a small blog, landing page, or documentation website. That’s the situation static website is a perfect fit, fast to get started, and very cheap to maintain.
Static Site Generator (SSG) is what we need to create static websites these days, it is often a framework that adopts static rendering strategy and help you generate static websites which are blazing fast and SEO friendly.
You can deploy your site to static site hosting services such as ZEIT Now, GitHub Pages, Netlify, and Render. Static sites are statically rendered so they work without JavaScript too!
Let’s look at common features that make a great static site generator:
Generating pre-rendered static HTML for each page. This is the core feature of any pure static site generator and happens at build time. With mobile-first indexing and page speed as one of the top ranking factors, it is easy to understand why lack of speed and huge load times is a disadvantage you cannot afford.
Has simple setup and fast to get started. An important selling point to those not really good at web development or non technical bloggers.
Markdown centered structure that helps you focus on writing. Static websites are perfect solutions to blog, landing page and documentation which are heavily influenced writing in markdown format.
Has support to multiple template engines. Besides popular support for React, Vue, and Markdown; SSGs might support EJS, Pug, Haml, Swig, Nunjucks, Mustache, Handlebars, Twig, Marko.
Has support to multiple content sources. Beyond local files handling, you can also load data from CMSs (Contentful, Drupal, Wordpress, etc.) or external APIs.
Hot reload in development and fast build time. Static site generators are made for developers and these are features that developers really care about. Hundreds of files should take only seconds to generate.
Has support document versioning and translation. This is key to documentation focused site generators like Docusaurus or VuePress.
Has flexible content management. A static site generator needs to extend beyond front matter and a couple of templates to be both scalable and manageable.
Has extensive ecosystem of plugins and themes. Plugins are the building blocks of features, each plugin handles its own individual feature. Themes are mostly focused on client-side, where plugins are more focused on server-side functionalities. Themes are also designed to be replace-able with other themes.
Build-in optimization for production. Enjoy the power of the latest web technologies – React.js , Webpack , modern JavaScript and CSS and more — all set up and waiting for you to start building.
Supporting Progressive Web App (PWA). Sites generated by SSG often meet three baseline criteria to qualify as a PWA as long as you run your page via HTTPS and install a plugin for the manifest and service worker.
Ultimately consider using static site generator when you are in following situations:
So what’s keeping you from moving to the world of static web development? It’s cheap to get started, you can always switch to client-side or server-side rendering any time you want with very little effort.
Don’t forget that some CSR or SSR frameworks also supporting generating static HTML as a feature. Next.js is a great example of server-side rendering framework that has support for static exporting which can be run standalone without the need of a Node.js server.