JAMStack website architecture: Prismic + Gatsby.js + Netlify
Blog
If you are developing a presentational site that won’t change often you can use a well-known platform like WordPress, but you would have to accept various limitations. Instead, you can look at the newest architecture and build your website with an innovative architecture stack that is fast, secure- and budget-friendly.
WordPress is a blogging platform that still uses “old” technologies like PHP, and is slower than other backend platforms like Strapi, Contentful or Prismic. Wordpress had a lot of security shortcomings, and this is where Gatsby excels. Another consideration when using WordPress is low flexibility in any custom functionalities. In order to get what you want, you need a developer and to add plugins one after another, keeping in mind that running each plugin is like loading a new library. Putting one plugin on top of another makes WordPress and similar services extremely slow.
If you have an innovative mind and you want to avoid the shortcomings of WordPress, one of the options is to use the JAMStack architecture.
JAMStack website architecture
JAMStack stands for JavaScript, APIs, and Markup. The term was introduced by Mathias Biilmann to describe a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. It has become a new standard for the web and has many advantages, such as:
- Faster interface
- Reduce site complexity
- Higher security
- Cheaper and easier scaling
- Better developer experience
In the architecture you will find three main blocks:
1. Data Source. You can provide data for your site from different sources. It can be a simple Markdown file, or various Headless CMSs (Prismic, Contentful, WordPress, etc). For example, the EWENTIVE website uses Prismic with a custom design of the data structure.
2. Code is in React using Gatsby.js. Gatsby is a static site generator that creates HTML pages from templates or components and a given content source.
Gatsby builds a static HTML version of a site, and the generated pages are then deployed to a web server. When the server receives a request, it responds with rendered HTML. Static pages eliminate the latency of database requests/responses. This is because you no longer need to build your page based on information from the database each time the user asks for it; the page is already pre-built, which makes it very fast and secure. Gatsby also utilizes the best contemporary techniques for page speed optimization.
Read the technical details about Gatsby: https://www.gatsbyjs.com/
3. Deployment to Netlify. This service is free for smaller sites. Netlify uses a content delivery network, or CDN, meaning that your site will be hosted on different servers around the world. Therefore users will get a version from the nearest server, which makes your website even faster. There are several other options to use for deploying your site, which is listed under the third block in the graphic below.
This diagram is explains what happens with edits of the code or content.
For example, edits in Prismic will trigger new builds that will automatically generate new files for the site and deploy them to Netlify.
- When code changes occurs in the Github repo, Netlify will detect the adjustments and will pull new code changes, build and then deploy the site
- When a user publishes new content, Prismic will use the Netlify webhook to trigger a rebuild of the site.
This architecture is perfect for presentational sites, publishing frequently new content while requiring few coding changes. It is not recommended for websites that are very dynamic or have user-generated content.