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!
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:
I think the text above is self-explanatory. With this information, we can make sense of the JAM shortcut:
- 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.
Now that we know all the terminology, it's time to explore the reasons and benefits behind the JAMstack.
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 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.
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.
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.
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.
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.
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.
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 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, 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.
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 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 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.
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 (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 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.
Now that you know what JAMstack is and what tools are there to deal with it, it's time for you to make a website! Go, pick one of the generators above and try for yourself to find out how nice static websites can be. There's no other magic way to find the best tool for you, besides just trying them all out. With that said, I hope that this article provided at least a little inside to how big and exciting the static world can be.
He has been working on the Internet since 1994 (practically a mummy), specializing in Web technologies makes his customers happy by juggling large scale and high availability applications, php and js frameworks, web design, data exchange, security, e-commerce, database and server administration, ethical hacking. He happily lives with @salvietta150x40, in his (little) free time he tries to tame a little wild dwarf with a passion for stars.
Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality. The project’s based on the world's most popular CSS framework - Bootstrap, for building…
In today's article we will show you how to animate a basic loader that spins when some predefined action is defined, such as loading an image. That can be used…
In this article we talked about what AJAX calls are and how to use them in a traditional way, by using the XMLHttpRequest (XHR) object. In short, thanks to AJAX…
Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…
Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…
In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…
Npm and yarn are package managers that help to manage a project’s dependencies. A dependency is, as it sounds, something that a project depends on, a piece of code that…