Static websites and so-called JAMstack have become pretty popular recently. And with 2020 on the horizon, this trend doesn’t seem to be stopping. Why? Why is old-school HTML + CSS + JS trio in its redesigned and renamed form gaining so much attention? In this article, we’ll explore what the JAMstack is and what’s so good about it, as well as check out some of the best NodeJS-based Static Sites Generators (SSGs). Let’s get started!
JAMStack
For starters, let’s talk a bit about the JAMstack and static websites themselves. As you might already know, stack in programming is a term used to reference some toolset - a collection of libraries and frameworks. The popular examples of that are MEAN (MongoDB, ExpressJS, Angular, and NodeJS) and MERN (React instead of Angular) stacks. So, as you can see, there’s some decrypting going on here.
Now, let’s get back to the JAMstack and, more specifically, to its definition:
Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.
I think the text above is self-explanatory. With this information, we can make sense of the JAM shortcut:
- JavaScript - web developer’s best friend, a place where all the logic is executed. Usually present both on the generator and client-side;
- APIs - providers for JS to pull data from;
- Markup - templates, processed at deployment time of your website.
“JAMstack”, as a term, was first used by Netlify around 2015. Its primary purpose was to convince developers to well-known and somewhat disliked static websites. A new name was meant to change people’s mindsets about old technology. As we know today - this strategy worked!
The main idea behind the JAMstack is the removal of any tight connection between the client and the server. The only way to receive your data is through APIs. Such data can be later processed together with markdown and other resources to create a static website that is then served to the client.
Reasoning
Now that we know all the terminology, it’s time to explore the reasons and benefits behind the JAMstack.
Pricing
Pricing is probably one of the most important advantages of static websites. To host them, you need no powerful server, no CMS and, what comes with it, less money. Remember, you process/prebuild your website to the form of static assets (HTML, JS, CSS, text files, etc.). These can be served ridiculously cheaply with no higher demands than just standard, low-priced hosting.
Performance
Performance is the next focus point of static websites. This might seem pretty obvious - static assets are fast - it’s in their nature. Nothing can beat them in this category. Using JAMstack, you can easily achieve high Google Lighthouse scores, thus getting higher in search results too! Outside from that comes the ease-of-use of Content Delivery Networks (CDNs_)_, which can boost your website’s delivery speed even more!
Stability & confidence
This one might be a little tricky. What does confidence mean? Well, mainly the stability of your website and its architecture. With JAMstack, things are really straightforward. There’s nothing more to it than just the static frontend and the generation process.
Your data comes from different APIs. Other functionalities can be provided with serverless systems. The main idea behind it is that you use 3rd party APIs and services to provide additional features to your website. There are many public serverless providers, including AWS, Google Cloud, and Microsoft Azure, all of which play nicely with static websites.
Scalability
JAMstack-based websites are easily scalable. It’s mainly due to the performance and architecture solutions behind them. Earlier mentioned, CDNs play an essential role here. Improving the delivery process can mean nothing more than providing more faster CDNs.
SEO
Yet another holy grail of static websites. When using JAMstack, having good SEO ranking is much easier than with Single Page Applications (SPAs). Static websites get better Lighthouse scores and are more likely to be fully indexed by Google and other search engines. That’s where SPAs are truly lacking. You have to use Server-Side Rendering (SSR) to get the same SEO performance as static websites provide pretty much out-of-the-box.
Security
Last but not least, there are security reasons. With your what could be backend spread into the number of APIs and other 3rd party services, the risk of severe security issues is significantly reduced.
Downsides
Of course, static websites have some disadvantages too. Probably the biggest one being that they are static. Again, what it means is that you don’t have any real backend running behind them. And, as not every functionality can be well-substituted by serverless services, JAMstack isn’t suitable for everyone.
Furthermore, static websites are not as “upgradable” as their dynamic counterparts. To update their content, you need to pre-process it first. And, the more and more pages your website has, the slower this process becomes. That’s why the build performance that many tools advertise so much is so important.
So, with all that said, the decision is yours to be made. Whether you’ll choose the static or dynamic path for your future website, it’s always good to first consider the pros and cons of both solutions.
Tooling
Now it’s time to explore some of the best JAMStack tools. But before that, let me provide some general details over the following generators.
First, the tools listed below are based on NodeJS (JavaScript) and grouped by the used JS framework. Second, all the tools here are general-purpose - no documentation generators or other specialized libraries and frameworks.
React-based
GatsbyJS
GatsbyJS is arguably one of the most popular static websites generators out there. It allows you to utilize popular tools like Webpack and, most importantly, React to create stunning-looking static websites. Besides that, the build speed of GatsbyJS is fast enough to handle even complex, multi-page setups. Great community, docs, and vast ecosystem make this generator one of the best in its category. A great number of plugins (both first and third-party ones) allow you to pull data from countless sources (with the help of GraphQL) and add different functionalities to your website with ease.
Next.js
Next.js is yet another React-based SSG. It’s created and supported by Zeit and is well-known within the React community. Not only it’s a generator but a full-blown framework with other functionalities such as SSR built-in. It gives you a choice on what type of website you want to create. With that said, Next.js can be considered an All in One (AiO) tool for everything that has something to do with React-powered websites. It has excellent documentation and an even better community behind it.
React Static
React Static, as the name implies, is a progressive Static Site Generator (SSG) for React. Being tightly connected with React, it has great support for all the related libraries and tools, such as Redux. It has a great build and resulting website performance. It also simplifies the development experience with hot-reloading out-of-the-box. All this and more is documented in fine-tuned GitHub-based docs.
Vue-based
Gridsome
Starting the list of Vue-based SSGs, we have Gridsome. It’s somewhat like a GatsbyJS counterpart but for Vue! It has equally impressive build and resulting website performance, Progressive Web Applications (PWAs) and SEO optimizations support, and other JAMstack goodness! Maybe it doesn’t have the community as big as GatsbyJS has, but, as it’s a relatively new project, I think it looks great! With that said, its documentation and community involvement are truly impressive.
Nuxt.js
Nuxt.js is a full-blown framework. What does it mean? Mostly that it’s a Next.js Vue alternative and that it has as much as three rendering modes: SSR, static website, and SPA. Nuxt.js as AiO solution allows you to choose what’s the best for your website. It’s very stable, well-known, and has great docs, community, and ecosystem. With all that in mind, it’s the right choice for any kind of demanding Vue project.
VuePress
VuePress is a little bit different than previous tools. It’s very minimalistic and allows you to generate your page’s content with the help of simple markdown files. It features rich plugin architecture and leverages the power of the Vue ecosystem. It is somewhat tailored towards documentation websites; however, with the option of using custom Vue components in your content, this tool can be used for many different purposes. In general, its main pros are simplicity and ease-of-use.
Other
Hexo
Hexo is NodeJS and Markdown-based SSG, tailored towards blog writers. It’s fast and has a rich plugins collection. These provide different kinds of features to your Hexo-based static website. The framework also has a well-developed theme system with several themes listed on its official page. Naturally, you can create your own plugins and themes to suit your personal needs. Hexo also has detailed documentation and a fine-sized community.
Eleventy
Eleventy (or 11ty) is a simple SSG, a JS alternative to Jekyll. It’s incredibly flexible, works well with data, and supports a lot of different templating engines and languages (markdown, html, hbs, etc.). 11ty’s overall simplicity, ease-of-use, and progressive nature make it a valuable tool. Also, docs are great and very informative.
Sapper
Sapper is an SSG based on the Svelte framework, that on its own, is recently getting a lot of traction. Because of the nature of Svelte, which moves a lot of processing to the compilation step, it’s fast by default. Sapper also has SSR support and other AiO framework goodness. So, if you like Svelte, are interested in it, or want to try it out, then Sapper might be the choice for you.