A quick introduction to the Jamstack

How WordPress runs the internet

You may have already heard the saying that “most of the internet content is backed by WordPress” which is, no doubt, true considering the fact that almost half of all the websites on the internet are created in WordPress.

While WordPress is a perfect fit for creators focussing on content and WYSIWYG-editing and not having to care about coding, it has a major downside: It is slow. WordPress websites run on a WordPress host that communicates with the frontend delivering HTML files, scripts and stylesheets as per request.

How to speed things up?

When thinking mobile-first, one major issue for website creators is slow internet connection in some areas. Developers always strive to reduce traffic whenever possible. This is due to the fact that especially mobile users tend to leave a website even faster when loading times are not acceptable anymore.

Considering the fact, that a lot of content on the web is static (meaning there is merely any business logic hidden behind many websites), there is no need for complex web server architectures. The content could be delivered over static CDNs that are optimized for high throughput of static content. Dynamic data could be delivered over loosely coupled APIs that are running independent of the CDN. That is the idea of the Jamstack.

Jamstack describes an architecture that focusses on decoupling of the frontend part of websites from data and business logic. Content is statically delivered over highly-optimized CDNs, logic is delivered over loosely coupled APIs. When running in a browser, Jamstack-backed websites only show statically created content which optimizes the time to “first contentful paint” (see Google Page Speed Insights).

What is needed for Jamstack?

Usually, a website running on Jamstack is backed by 4 components or services:

  • A static site generator such as Next.js that creates static HTML files. As static site generators run over solid web frameworks (Next.js runs over React), developers are flexible on how to present content to users.
  • A (headless) CMS that delivers content such as Strapi. It is also possible to use WordPress as a headless CMS. This requires the setup of a plugin like WP-GraphQL.
  • A CDN providing the static content, Azure Static Web Apps being a good example.
  • A CI/CD system that generates artifacts that are delivered through the CDN.

How to start?

Jamstack is well-documented (see here) and there are tons of tutorials on how to get started with Jamstack.

I would recommend to choose frameworks based on your experience and preference on backing technologies. If you are a React developer, Next.js may be a good choice as a static site generator.

I can’t wait to see the sites you build on Jamstack.

Happy coding and thank you for coming around! 🎉

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store