Befenits 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.

Tooling

If you decide on going with JAMstack, it’s time to explore the best tools for the job. We’ll be comparing two different generators. One of them is based on React, the other one 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.

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.