Mar 21, 2020 • ☕️ 4 min read
Short answer is YES. Long answer is it depends on your content and expectation in terms of performance, SEO, cost, and developer experience.
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.
There are tons of static site generators out there with different set of supported features, following are most popular ones:
Gatsby is actually a great point of entry. It has fantastic documentation and examples of React and GraphQL, and its structure lends itself to thinking in React and thinking in GraphQL. I think Gatsby has a great future ahead of it!
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.
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.
A small CSS file normalize.css that provides better cross-browser consistency in the default styling of HTML elements alternative to the traditional CSS reset
On debate of different strategies to fix inconsistent default styles across browsers using Reset, Normalize or Custom CSS
Pros and cons of using CSS frameworks like Bootstrap, Foundation, Materialize CSS, Semantic UI, Tailwind, Ant Design
Whether you are going to focus on frontend or backend, these are my curated list of knowledge or technologies you must master