What is Jamstack?
Jamstack is the modern way of building for the web which is based on three main tech stacks Javascript, Markup, and Application Programming Interface (API).
Jamstack is the modern way of building for the web which is based on three main tech stacks Javascript, Markup, and Application Programming Interface (API). Jamstack builds on many of the tools and workflows developers love. Jamstack embraces a few core principles that make it fast, secure, and collaborative.
Core Principles
- Pre-rendering
- Decoupling
Pre-rendering:
In the traditional approach, when a request is sent by the client to the server, it is requesting that the server sends a copy of a webpage to the client when approved by the server, a status code is sent to the client which means the client can render the page. The approved web pages are sent in chunks and later assembled by the browser into a complete web page and display to us.
In Jamstack, the process is completely optimized as time-tasking components are moved from run time to build time, so sending the request to the server again is completely annihilated. Instead, the previously requested page is fetched once at build time and then rendered into static HTML pages. SEO is better with jamstack because of fast-loaded pages and static content.
Furthermore, the process of pre-rendering results in sites that can be served over a CDN reducing cost, complexity, and risk of dynamic servers.
Decoupling
Decoupling is the process of separating systems and services. The traditional approach is monolithic, meaning both frontend and backend/services are tightly coupled together. Once the backend is updated, the frontend will also need to be updated.
The jamstack process focuses only on the frontend, it is a separate software that only accesses existing APIs and data sources. At this point, ambiguous logic has been eliminated so pages are served even faster. Jamstack also offers the convenience to utilize trusted frameworks, headless CMSes, and other content management systems. This is where contentrain comes into play.
What are Static Sites
Static sites are server-side web pages pre-builds that are served to clients when requested over a CDN, rather than requests being sent to the server to render a particular web page all over again. Each web page requested is an HTML file. With the absence of heavy javascript content and less or no request being made to the database as contents are already pre-built and cached in the CDN, security is kept in check as hackers have nothing to exploit and so improves the security of the application.
The advantage of static sites is that they're loaded very fast and the speed remains the same even when it is scaled.
Static site generators
A static site generator is a tool that generates HTML websites based on templates. A static site generator automates the task of developing individual HTML pages and the generator gets those pages ready to serve to users ahead of time. There are a number of static generators, according to jamstack.org there are over 333 generators which are some of the most popular ones are Nuxt, Next.js, and Hugo.
Why you need a static site
Speed and Performance Static sites are rendered on the server and are sent to the client as pre-built HTML static webpages which makes it run even faster. Improved page speed can also lead to better SEO rankings.
Security Dynamic sites are prone to attacks from hackers because the whole system is connected. On the other hand, hackers are limited to exploiting options on static sites as frontend and backend are completely different.
Scalability You do not have to rewrite or make changes to your static site for it to work on different platforms. A static structure can easily adapt to the changing needs of your website or app.
Flexibility Static sites can render using any framework or even headless CMS like contentrain which makes building easier and faster.
Contentrain and Static Sites
Contentrain is all about git, which gives you the ability to collaborate in real-time on projects. However, there are other exciting benefits that contentrain offers which increase the ease of use.
- Works well with all popular SSG frameworks such as NuxtJs, NextJs, Gatsby, Hugo, 11ty, Jekyll, VueJs, ReactJs, Gridsome and more, which makes Coontentrain cms framework agnostic.
- Contentrain gives you the flexibility to choose your data type first before choosing what components are needed, unlike other frameworks that are rigid to this pattern.
- Since SSG does not allow for previews, and Contentrain in conjunction with SSG, you can preview your web page before publishing.
- Contentrain allows users to edit Markdown, YAML, and JSON files no matter the SSG used.
- Make use of frontmatter in your contents.
- You can easily build templates with SSG and get to update these templates from Contentrain easily and seamlessly.
- Contentrain gives you the opportunity to have better SEO using static sites. Static sites render with speed and so are ranked higher by Google.
- With a static site, both developers and content editors follow the same workflow.
- By setting up an automatic deployment that rebuilds this HTML every time content is updated, updating content with a static site generator can feel just as snappy.
- Automatic deployment of static sites is very crucial which is why we contentrain is git-based developers can easily setup deployment tools with ease.