In this article, we share some of the main concepts and guidelines for introducing to the world of JAMstack.
With the Static nature of a JAMstack application makes scaling easy and causes little or no development overhead. The JAMstack approach can also improve your application’s security posture.
This architecture has become very popular in recent years, especially with the arrival of new requirements from browsers and particularly from the same users who request faster loading websites. This approach brings benefits such as increased performance and security.
Now, let’s see why dynamic sites are not always a good option…
Challenges facing dynamic websites
Starting with performance, no matter how well we optimize all dynamic websites, they’re still not fast enough… That’s because of the number of steps that have to be taken to display the requested content every time someone visits the website.
Also, we are at the point where every website that is being built is using WordPress (which is maybe not the best choice, but still we love it ❤️) to give an example. This is the most popular CMS, overloaded with add-ons, scripts, and a lot of other stuff that only slows down what we develop. In addition, we have issues regarding security and expensive hosting.
Maybe you’d be interested in reading: How we redesigned our Website in WordPress
When are we not building a site with Jamstack?
Any project that is based on a close connection between client and server is not built with Jamstack. This includes:
- A site developed with a server-side CMS such as WordPress, Drupal, Joomla, or Squarespace.
- Monolithic web application built by a server that is based on Ruby, Node, or another backend language.
- The single-page application that uses isomorphic representation to create views on the server in runtime.
Why start thinking about static websites
When a browser requests the URL of a website, the server returns the static page in its entirety. No database calls are made, and no content is generated on the fly: the content is already there.
Speeds up your load times
The fact that JAMstack’s websites don’t have to make any calls to a database makes the loading time exponentially faster.
Safe and secure
The delegation of server and database side operations eliminates many points of failure and security vulnerabilities.
The front-end and the CMS are disconnected
It doesn’t have a CMS that dictates how it should structure its content and pages. Not having a CMS linked to the presentation layer gives you the flexibility to create anything you want in the front-end while using the API ends to extract content.
Reduce the Cost of Scale-Up
This is not dealing with expensive run times or complicated server configurations, it’s just dealing with static files that are served on the client-side.
Greatest Developer Experience
Front-end developers can focus on the front-end, without being tied to a monolithic architecture. This usually means faster and more focused development.
Know about our Nearshore services.
Statistical website generators
For the front-end, there are already several static generators as we will see below:
- NextJS: is a React framework for SSR applications, statically generated applications, single-page applications, progressive web applications and desktop applications.
- Gatsby: is a free and open-source framework based on React that helps developers to create incredibly fast websites and applications.
- NuxtJS: is the Vue.js framework for universal applications, statically generated applications, single-page applications, progressive web applications and desktop applications.
- Hugo: The world’s fastest framework for creating websites. It is one of the most popular open-source static site generators. With its incredible speed and flexibility, Hugo makes creating websites fun again.
This lets us save development time and focus more on writing code than on optimizing our site.
API, markup and hosting
The content can be static or dynamic HTML that is served by an API through a Headless CMS, such as Contentful, DatoCMS, or WordPress API. Once a change is made to the CMS, a new compilation of your site will be turned on and then implemented as static actives.
In the next article, we’ll go further into Gatsby and Next.js, which are based on React. We’ll see which one to choose according to your application and the advantages of each one.
Do you want to know more about Clarika’s development? Leave us your question here.