In the past year, we have witnessed a lot of breakthroughs and outstanding releases in the world of IT. Yet, today, we’re going to devote the article to a ‘quiet revolution’ that continues to happen even now, gaining even more admirers, as well as haters in the development community. We’re talking about the movement for static websites based on the JAMstack approach as opposed to dynamic ones.
To fully understand what JAMstack is, we should have a clear understanding of what dynamic and static websites are. To begin with, all websites are divided into these two groups. In the first case, when a user requests a page, the page is collected at the time of the request, and then displayed in the browser. In the second, the server already stores the ready pages.
The defining features of dynamic websites are their functionality, customization, and ease of updating. It allows you to create complex systems. The disadvantage of most dynamiс websites is the high usage of system resources due to the inclusion of a web-server and database.
Static websites, as we mentioned above, consist of the ready web-pages (HTML, JS, graphics, fonts), downloaded and stored on the server. Essential advantages of static websites are high-speed page load and increased resistance to hacker attacks. If correctly built, static websites can much better maintain the website functioning at high traffic.
But, let’s not set aside some disadvantages. To make even the slightest change to the website, you need to generate it from scratch. To make this process easier, the world of modern technologies suggests a variety of solutions, namely Static Site Generators (SSG) and… JAMstack.
API. This is the set of technologies that includes subroutine definitions, communication protocols, and tools for building software.
Markup. It’s a computer language that includes tags to define elements within the document. It differs from a typical programming syntax and can be read by a human. The most used among them are HTML and XML.
Speed. This metric is the most beneficial thing about JAMstack. It gives a faster Time to First Byte (TTFB) if CDN (Content Delivery Network) or GitPages are used with this. This is due to a lack of interaction with a database: the file is already compiled and gets directly served to the browser from a CDN. Moreover, the caching process is lots easier. URLs return the same HTML to all users, and there are no query parameters that can affect the version of the cached page.
Security. The lack of server-side & database operations makes a static site substantially more secure. As a result, it’s immune to SQL injection.
Less Cost. You can get away with cheap hosting as long as you pair it with a fast CDN.
SEO. Creating pages and structure of the project are more flexible. Many traditional CMS’s will automatically generate pages for categories, tags etc., but SSGs let us fine-tune page creation. You don’t have a CMS dictating the way you should structure your content and pages.
However, all mentioned pros for your website based on JAMstack can be lost if you don't optimize graphic content and follow best practices, suggested by the Netlify co-founder Mathias Biilmann. If you do it in the right way, you will have a perfect site with all the pros.
Performance is the most significant at this. But what does it mean for customers? We will explain. If you have a static site based on the JAMstack approach, you will have:
-A faster page
-Better user experience and a better Google ranking
-More traffic, and thus sales
For now, JAMstack has a substantial community which has been producing best practices. Based on the research, we can say that the ecosystem around this approach has already been formed and has shown us a number of stable solutions that can bring clear benefits in comparison with dynamic sites.
Difficult to manage roles. Namely, user permissions and editor roles. But even in this case, this flexible approach provides us with various ways of solving this problem. An advanced Headless CMS gives us an opportunity to manage permissions and roles (Contentful, Prismic, and Directus). If you need more features related to managing user permissions and editor roles, using a traditional CMS would be the worst thing to do (it contradicts the JAMstack approach).
Ill-considered dynamic elements. If you need shopping carts, feedback forms, comments, etc., you will need to use additional web-services. A large number of web services can jeopardize our security. You must be sure that scripts are not fake and their exchange with web services over HTTPS is secure.
Non-competitive price. Some tech solutions on the market can be cheaper than JAMstack (for example, WordPress, which is in the skillset of each and every developer and being offered by a range of dev agencies).
The complexity of scaling based on the complexity and size of the project. Obviously, the JAMStack project cannot be compared to complex systems.
Real-time updates. The JAMstack approach will not be intended for real-time updates.
1.Choose a host with a fast CDN to deliver your static files. It can be Amazon Web Services (AWS) such as S3, Netlify, or Custom Setups with CloudFlare.
2.Make a decision about a Static Site Generator (SSG). There are a lot of SSGs, but we have already identified the most popular among them:
-Jekyll (built in Ruby),
-Hugo (built around Google’s Go programming language),
-Gatsby (using ReactJS),
-Hexo (created with Node.js).
3. Need to make decision about a Git-based CMS or an API-driven CMS.
4. If you need dynamic features You will need to choose web service platforms (Disqus or IntenseDebate for comments, FormKeep for forms, Lunr for search, Stripe for the payment, Cloudinary for media management).
If you’re still not sure about JAMstack in terms of a commercial project, we’d like to reassure you. Many well-known companies, such as Red Bull, Mailchimp, New York Times, Sequoia Capital, and Smashing Magazine, have already implemented this stack. More websites with examples can be found here.
JAMstack is a great approach. Even though, it can be useful only for specific projects, the benefits of static development in many cases outweigh the drawbacks. For small and middle-size projects with a specific list of dynamic functions, this is the best option. The main idea is to choose the right tool for the right problem.
Just don’t forget that if you want to take advantage of this approach, you will need an excellent team of developers which will achieve better performance, higher security and cheaper and easier scaling. This is exactly what K&C do best!