Back to Blog
Web DevelopmentBeginner

JAMstack Architecture Explained

Simha Infobiz
March 24, 2024
5 min read

JAMstack isn't a specific tool; it's a philosophy that has decoupled the frontend from the backend. It stands for JavaScript, APIs, and Markup.

The Old Way (LAMP Stack)

In a traditional WordPress site (LAMP), every time a user visits your homepage:

  1. The server starts PHP.
  2. PHP connects to MySQL.
  3. PHP fetches the latest posts.
  4. PHP builds the HTML on the fly.
  5. The server sends the HTML. This entire process is slow, expensive, and vulnerable to hacking (SQL Injection).

The JAMstack Way

  • Markup (Pre-built): You run the build process once on your laptop or CI/CD pipeline. It generates plain, static HTML files for every page of your site.
  • JavaScript (Dynamic): Any dynamic functionality (like comments, search, or shopping carts) is handled by JavaScript running in the user's browser (Client-side hydration).
  • APIs (Serverless): The JavaScript talks to reusable, specialized APIs (Stripe for payments, Algolia for search, Auth0 for login) rather than a monolithic backend.

Why Switch?

  1. Speed: You are serving static files from a CDN (Content Delivery Network). It is physically impossible to be faster. There is no database query logic to wait for.
  2. Security: You can't hack a static HTML file. There is no database to breach on your web server because there is no web server logic—just file hosting.
  3. Scale: A viral post won't crash your server. CDNs like Cloudflare or Netlify can handle millions of requests per second effortlessly.

The Role of Headless CMS

JAMstack pairs perfectly with Headless CMS (Contentful, Strapi). Writers create content in a friendly UI. When they hit "Publish", a webhook triggers your build system (like Vercel). The build system fetches the new content, rebuilds the HTML, and pushes it to the CDN globally in minutes.

JAMstackArchitectureNetlify
Share: