If you haven’t been keeping up with the static websites hype train, I’d say you’re reading this at just the right time. Static websites or so-called JAMstack have become pretty popular recently.
Why?
Why is old-school HTML + CSS + JS in its redesigned and renamed form gaining so much attention? In this article, we’ll explore what exactly JAMstack is and what the fuss is all about, then we’ll check out some of the best static websites generators out there!
JAMstack
The term JAMstack was first used by Netlify as a new synonym for old and unpopular static websites. JAMstack stands for:
- JavaScript — web developer’s best friend, a place where the logic is executed
- APIs — providers for JS to pull data from
- Markup — templates, processed at deployment time of your website
To summarize, the main idea behind the JAMstack is the removal of any tight connection between client and server. The only way to receive your data is through APIs.
Reasoning
Now, it’s time to explore the benefits of the JAMstack.
Pricing
Pricing is probably one of the most important advantages of static websites. To host them you do not need a server or CMS (which means fewer costs). Remember, you process/prebuild your website to the form of static assets (HTML, JS, CSS, text files etc.). These can be served ridiculously cheap with no more demands than just standard, low-priced hosting.
Performance
Performance is the next focus point of static websites. This might seem pretty obvious to you — static assets are fast — it’s in their nature. Nothing can beat static websites in this category. Using JAMstack you can easily achieve high Google Lighthouse scores, thus getting higher in search results! Aside from speed, there’s also the ease-of-use of CDNs. By using these you can boost your website’s delivery speed even more!
Stability
Stability mainly refers to a high level of confidence in regards to your website and its architecture. With JAMstack, things are really simple — there’s nothing more to it than the static frontend. Your data comes from APIs. But what about other functionalities?
Enter, serverless providers. The main idea is that you use 3rd party APIs and services to provide additional functionalities to your website. There are many serverless providers including AWS, Google Cloud and Netlify Functions! All of which play nicely with static websites.
Scalability
JAMstack-based websites are easily scalable. It’s mainly due to the performance and architecture behind this solution, earlier mentioned CDNs play an important role here. Scaling static resources delivery can mean nothing more than providing better and faster CDNs.
SEO
SEO is yet another holy grail of static websites. When using JAMstack, having good SEO is much easier than with SPAs. Static websites get better Lighthouse scores and are visible and easier to index by Google. This is the field where SPAs are truly lacking. For these, you have to use SSR to get the same level of SEO as static websites have out-of-the-box.
Downsides
Of course, static websites have some disadvantage too. With probably the biggest one being that they are static, meaning you don’t have any real backend running behind it. And, as not every functionality can be substituted by serverless services, JAMstack might not be suitable for everyone.
Going further, static websites are not as updatable as their dynamic counterparts. To update the content of your JAMstack-based website, you need to preprocess it. And, with more and more pages your website has, this process becomes slower. That’s why the build performance that many tools (which I’ll cover later on) advertise so much is so important.
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
If you decide on going with JAMstack, it’s time to explore the best tools for the job. We’ll be comparing four different generators. A pair of them is based on React, the other two on Vue. This way you would likely be able to choose one that best suits your personal preference. We’ll compare some basic factors like development experience, performance, support, docs, community and etc.
React-based
GatsbyJS
GatsbyJS is arguably one of the most popular static websites generators out there. It allows you to utilize Webpack and, more importantly, utilize React to create stunning websites. Besides that, the build speed of GatsbyJS is fast enough to handle super complex stuff. There are a number of plugins that allow you to pull data from countless sources and add additional functionalities to your website with ease.
Getting started
GatsbyJS, on its official website, provides tons of resources for getting started with its whole ecosystem. There’s a step by step tutorial for complete beginners to web development and things like NodeJS and Git (although I would recommend having a bit more knowledge before going directly with Gatsby and any other listed tools). There’s also a quick start section for more advanced users.
When you’ll feel more comfortable with Gatsby and would like to start digging deeper, there’s plenty of documentation for you to explore. Covering topics like environment setup, data sources, ecosystem introduction, all the way up to deployment phase, you should find it to be very insightful. Beyond that, there’s API references, performance recommendations and links to other, more advanced tutorials.
Usage
Development experience is one of the decisive factors when it comes to choosing your tools. With Gatsby, things are simple enough. You should be in the React ecosystem, meaning React itself, related libraries, JSX, and other stuff. If React is not your thing, then Gatsby is not either. But, if you like to use React, then Gatsby would most likely be your static websites go-to. Here, everything is built with React. Whole pages are just React components! You can freely use any modern JS features you’d like, as integration with Babel or TypeScript, for example, is easy to achieve. In fact, there’s a whole collection of Gatsby starters which you can use to set up your own project super-fast.
All of the data you’ll use in your Gatsby project comes from GraphQL source. GraphQL, if you don’t know, is a query language developed by Facebook to query data. It integrates with React and is pretty robust and great overall. But, if you don’t really like GraphQL, then there’s a way around it. Of course, this requires omitting Gatsby’s data layer and thus makes some things feel less… polished. But, it’s good to have an alternative anyway.
Finally, one of the most important aspects of Gatsby is its ecosystem. More specifically, I’m talking about around 700 plugins that are there, listed on the official website, ready to be used. And, while the number of actively maintained ones can be a bit smaller, this makes Gatsby development much easier. These plugins can handle a variety of things, like data sources (e.g. headless CMS and others), custom features (e.g. PWA functionality, custom website search) and build optimizations (e.g. image resizing). And the convenience of just installing a plugin and simply continuing your work is just awesome.
Performance
Now, when it comes to the performance of any generator-like tools, we have two different categories: the performance of the generator build and its actual output. And the performance of Gatsby’s output website is just staggering! It’s so easy to achieve 💯 Lighthouse score with this thing. It’s not only because of the fact that it’s a static website. Gatsby does tons of optimizations under-the-hood, for your website to always feel smooth.
It’s when it comes to build performance, where Gatsby is lagging a bit. It does a number of optimization here as well, so, for example, every next build will be faster than the first one, but it seems like it’s not enough. There are reportedly some issues with Gatsby’s builds taking quite a while. On the positive side though, this has been and is worked on. Gatsby v2 has made some major improvements in this field, and apparently, the same will apply for future v3.
Support & community
Gatsby is a great, actively developed and an on-going project. With more people using it every day and some big players relying on it, it’s not going anywhere anytime soon. Being based solely on React and related tools, you can easily find help for any of your problems, not only in Gatsby’s but also in React’s vast community.
Next.js
Next.js is yet another React-based static websites generator. It’s created by Zeit and is widely-known in React community. Not only is it a generator but also has SSR support built-in. This gives you a choice on what type of website you’ll be creating. Next.js also simplifies the whole process of React development. With that said, it can be taken as an all-in-one framework for everything that has something to do with developing React websites.
Getting started
Next has an entire getting started section, covering everything you need to know to start using it. With a framework that supports SSR, static websites and serverless deployments, it’s not a simple task to create a good guide for all of that stuff. That’s why Next approached its tutorial in an interesting way — by making it interactive. Every time you finish part of the tutorial, you’re welcomed with a simple, topic-related question. If you answer correctly, you get some points. It’s a small, but noticeable detail.
When you need more information, you can always go to the docs. Their design is simple and readable. Every feature is well-documented, with appropriate examples and code snippets included.
Usage
Again, Next is mostly for those who like React. It only further improves on it. With all possible outputs (e.g. SSR) and features, the whole complexity of this framework is hidden behind React’s simplicity with a few more components and functions. It pretty much ensures, you to be more productive without caring about what’s exactly going on.
It’s very intuitive. You can edit your website’s Head with provided Head component, link to other pages with Link component, style your components with styled-jsx and fetch data in any way you like. But what probably impressed me the most is the fact that you don’t have to import * as React from “react” in every page or component (pages are, naturally, React components). It’s a small detail, but it makes the development experience so much better.
Unlike Gatsby, Next isn’t just a static website generator. Here, you can write your web app once and target multiple outputs. As it’s said on the front page of the project — you can easily use it to target Electron, PWA, static websites, server-rendered websites and more. It’s just something more than a generator. Maybe that’s why there’s no such ecosystem or well-developed plugins system as it was in Gatsby’s case. With that said, Next integration with React is so great, that you can use pretty much any other React-related library you’d like to achieve your goals.
Performance
The performance of Next can be a hard thing to talk about. That’s because of how many output types are possible with it. Next has mainly focused on SSR and that’s what it does the best. But, because we’re talking about static websites here, things are a little different. Just like Gatsby, (and quite naturally) Next produces fast and optimized static websites. As for the process of generating the website itself — it is optimized, but there’s definitely some room for improvements.
Support & community
When it comes to community, Next is a clear winner. It is probably the most popular React framework. And because of that, you should easily find help whenever you’ll need it. Next is also made by Zeit, a company which also created Now (serverless deployment platform). That’s (and for the variety of reasons mentioned above) why I think Next has great support and backing overall.
Vue-based
Gridsome
Starting with Vue JAMstack websites generators, we have Gridsome. It’s just like GatsbyJS counterpart but with Vue backing it! It has equally impressive build and page views performance, PWA and SEO support, and other JAMstack goodness! Maybe it doesn’t have the community as big as GatsbyJS has, but it’s just fine given the project’s age (born October 2018). With that said, its documentation and community determination is truly impressive. I personally have high hopes for this particular project!
Getting started
All of Gridsome’s documentation are placed under a single location. When opening it, you’re greeted with a small getting started section. It’s short, but enough for developers with even small experience to catch up.
The rest of the docs is impressively detailed and well-written for such a young project. It has almost everything you’d need to know, before creating your own Gridsome static website. Whether it’s about data sources, routing, page transitions, deployment or the API reference — these docs got you covered.
Usage
Gridsome has its whole architecture based on Vue. Pages, components, links — almost everything is a Vue component. Only Head and HTML attributes must be set from the main JS file.
Data in Gridsome can be received through official GraphQL data layer (hello Gatsby), as well as in other ways (e.g. dynamic data with fetch). Gridsome provides custom blocks to hold your GraphQL queries. This way, your queries don’t have to be string literals, which makes writing them much more convenient IMHO.
As for the ecosystem, Gridsome has taken some ideas from Gatsby here too. There’s a collection of ready-to-use templates, which isn’t too impressive at this time (two official templates). The same goes for the collection of (around 20) plugins, which allow you to pull the data from different sources and e.g. add Google Analytics to your site easily. But, this is something that will most likely improve over time, with more people starting to use Gridsome.
Performance
Build-performance-wise Gridsome stays right up there with Gatsby and Next. Naturally, there’s room for improvements. But, comparing generators based on two different libraries is interesting. Here you can clearly see that neither Vue or React provide better transpilation times. It’s safe to assume that JSX and Vue components syntax are matching well in this category.
Support & community
The community is an aspect that Gridsome lacks mainly because of how new it is. And although the number of resources and articles about it has rapidly grown since its release, it still can’t match Nuxt (which we’ll talk about in a moment). I just recommend for any Vue developer to try it out or at least keep an eye on its development.
Nuxt.js
Nuxt.js is a full-blown framework for Vue. What does it mean? Well… it has as much as three rendering modes: SSR, static website and SPA all of which have own specific advantages. Nuxt.js as an all-in-one solution allows you to choose what’s the best for your website. With that in mind, it’s a good solution for any kind of demanding Vue project.
Getting started
Just like Gridsome is an alternative to Gatsby, Nuxt is an alternative to Next. It’s a great framework for creating any kind of Vue applications, well-known among the Vue community. On its official website, you can find a guide, that teaches you about every feature that Nuxt provides. It’s highly detailed and explains aspects such as basic configuration, routing, data sources, state management, and many deployment techniques.
Going further, you have two more sections covering API reference and a number of interactive examples. The API docs cover every single method, class, component etc. that Nuxt provides, making it an incredible source of knowledge within your grasp. The examples, on the other hand, showcase you some commonly used patterns and other use-cases of Nuxt.
Usage
Nuxt is extremely dependent on the Vue ecosystem. It has tools and libraries like vue-loader for Vue components, Vuex for state management and vue-router for routing integrated into its core. What this means is if you’ve used these tools before, which you most likely did (assuming you’re a Vue developer), then Nuxt will only make your development process easier, providing all of them in a nice, single package.
Just like Next, Nuxt, as I mentioned earlier, allows you to target multiple output formats with the same code. This makes the development very pleasing. Of course, all of the outputs run really smoothly, so that you can get great performance with little to no additional work.
Performance
As for the performance, the situation with the output is no different. The static website output works well, with optimal performance.
When talking about the speed of Nuxt as a generator though, there might be some issues. Nuxt has been known to be a little slow and buggy in the past. Builds were taking large amounts of time and some things were not looking good with Nuxt in v1.x.x. But, it drastically changed for better, starting from v2. One of the most important changes was a switch to Webpack v4 (and some smaller changes) which brought a significant boost in performance. Now Nuxt is a worthy competitor for other generators — even Next!
Support & community
Nuxt is arguably the most popular Vue framework out there. And, with no much competition, it has seen major adoption in the last few years. With that said, it has a great, really big community of Vue developers and is actively maintained. So, yeah, it’s stable and production-ready!
Is it worth it?
So, after this quick look at the tools above, you might start to think if it’s really worth your the time and effort?
Like I said earlier, when choosing to use any of the generators above (or any other for that matter), you must know that there might be a pretty big learning curve coming alongside with it. That’s why frameworks that are based on tools that you already know (like Nuxt) give you an advantage here — because you know a bit more about what’s going on.
Next, you have the aspect of the community. While it might not be a decisive thing for some, using a project that has a vast community of people associated with it, clearly has some advantages. You always have a higher chance of finding help whenever you’ll need it. Also, projects with bigger communities tend to be more stable and future-proof (yet another pro).
And finally, we have the dev tools. All of the above-listed generators have some kind of CLI or even real dev tools in form of a browser extension or something. These smaller tools can provide you with an incredible boost in your productivity and development experience. Starter kits and tools that can help you set up your project are really helpful too.
In general, there are a lot of things to consider when choosing your tool. But, if you don’t want to use any tools and things like that, you can always go with pure React, Vue or Angular, or even better — good, old HTML5, CSS and JS combo.
Conclusion
In this post, we have looked at the best static websites generators. There’s no magic way to find the best tool for you, besides just trying some of them out and playing with them. But, with that said, I hope that this article provided at least a little insight into how big and interesting the static world can be.
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single page apps.
Of course, if you liked this article consider sharing it, checking out my personal blog and follow me on Twitter and on my Facebook page for more interesting content.
