How JAMstack Is Reinvigorating Static Sites

How JAMstack Is Reinvigorating Static Sites
[:en]This TITLE on thumbnail[:]
[:en]This TEXT on thumbnail[:]

JAMstack – Bringing Back Static Websites

JAMstack is breathing new life back into static websites as a genuine alternative to the new dynamic norm. Over the past year, we have witnessed many exciting breakthroughs and outstanding releases in the world of IT and particularly front end development. Yet, today, we’re going to devote the article to a ‘quiet revolution’ that divides opinion within the development community. We’re talking about the movement back towards static websites, as opposed to dynamic ones, based on the JAMstack approach.

Static Website vs. Dynamic Website

To fully understand what JAMstack is, we should have a clear understanding of what dynamic and static websites are. All websites fall into one of these two groups. In the case of dynamic sites, when a user requests a webpage, the page is collected at the time of the request, and then displayed in the browser. In the case of static, the server maintains the pages ready to go.

The defining features of dynamic websites are their functionality, customization, and the ease at which they can be updated. Opting for a dynamic approach allows you to create complex systems. The disadvantage of most dynamiс websites is the comparatively high usage of system resources due to the inclusion of a web-server and database.

Static websites, as we mentioned above, consist of ready-to-go web-pages (HTML, JS, graphics, fonts), downloaded and stored on the server. The advantages of static websites are high-speed page load and better resistance to hacker attacks. If correctly built, static websites can much better maintain a website that has high traffic.

But, let’s not forget some disadvantages. To make even the slightest change to the website, you need to regenerate it from scratch. But it’s exactly here that Static Site Generators (SSG) and… JAMstack come into play.

What is JAMstack?

JAMstack is a new trend in web application architecture, The “J” stands for client-side JavaScript, “A” – reusable API, and “M” – pre-built Markup. Let’s look at each of the three elements.

JavaScript (JS). It’s a programming language. The vast majority of websites use it and developers regard it as one of the universal programming languages with the fastest learning curve.

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.

JAMstack

Advantages of JAMstack

Speed. This greatest strength of JAMstack. It leads to faster Time to First Byte (TTFB) if CDN (Content Delivery Network) or GitPages are also used. This is due to a lack of interaction with a database: the file is already compiled and is 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 means a static site is substantially more secure. As a result, it’s immune to SQL injection.

Lower Cost: you can get away with cheap hosting as long as you pair it with a fast CDN.

SEO: creating pages and structuring the project is more flexible. Many traditional CMS’s will automatically generate pages for categories, tags etc., but SSGs allows for finely-tuned page creation that is optimised for what search engine algorithms like Google’s are looking for. You don’t have a CMS dictating the way you should structure your content and pages.

However, the benefits of using JAMstack can be negated if you don’t optimize graphic content and follow best practices, suggested by the Netlify co-founder Mathias Biilmann. If you appriach building a static site with JAMstack in the right way, you will have a perfect site with all the pros while largely avoiding the cons.

Performance is, at the end of the day, the most important quality of any user-facing website. And if you have a static site based on the JAMstack approach, you will benefit from:

  • A faster page
  • Better user experience and a better Google ranking
  • More traffic, which can be converted into higher sales

JAMstack also has a substantial and active community which has been helping define best practices. We can confidently say that the ecosystem around the JAMstack approach has already been formed and has demonstrated stable solutions that represent clear benefits when compared to dynamic alternatives.

Disadvantages of JAMstack

Difficult to manage roles: namely, user permissions and editor roles. However, the flexibility of the JAMstack approach provides us with various ways of getting around this problem. An advanced Headless CMS gives us the 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 security. You must be sure that scripts are not fake and their exchange with web services over HTTPS is secure.

Cheaper alternatives: 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 support is always offered by a wide range of dev agencies).

The complexity of scaling: dependent upon the complexity and size of the project. Obviously, the JAMStack project cannot be compared to complex systems.

Real-time updates: the JAMstack approach is not intended for websites that use real-time updates.

Developing a JAMstack-based Website

1. Choose a host with a fast CDN to deliver your static files. That might be Amazon Web Services (AWS) such as S3,        Netlify, or Custom Setups with CloudFlare.

2. Make a decision on a Static Site Generator (SSG). There are a lot of SSGs and the most popular are:

  • Jekyll (built in Ruby),
  • Hugo (built around Google’s Go programming language),
  • Gatsby (using ReactJS),
  • Hexo (created with Node.js).

3. Make a decision on a Git-based CMS or an API-driven CMS.

4. If you need dynamic features you will need to choose web service platforms such as 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, The New York Times, Sequoia Capital and Smashing Magazine have implemented this stack. More websites with examples can be found here.

Conclusion – JAMstack Is A Great Approach (for the right project)

JAMstack is a great approach. For specific projects, the benefits of static development can outweigh the drawbacks. For small and middle-size projects with a specific list of dynamic functions, JAMstack could well be the best option. As always, the challenge is to match the right tools and approach to the specifics of the case in hand.

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. Sounds like the K&C web development team!

Add comment

E-mail is already registered on the site. Please use the Login form or enter another.

You entered an incorrect username or password

Sorry that something went wrong, repeat again!
EN DE
Contact us