Infra: Node Jamstack

JAMstack stands for JavaScript, APIs, and Markup. It’s a philosophy that moves logic from the server to the client (or build time).

In the old days (WordPress), every page load queried a database. In Jamstack, we pre-render pages as HTML at “Build Time” and serve them from a CDN. This makes your site unhackable (it’s just static files) and incredibly fast.

Architecture

• Headless CMS: Strapi, Sanity, or Contentful. It has no “View” layer—just an API for editors to manage content.
• Static Site Generator (SSG): Next.js or Astro. It fetches content from the CMS during build and generates HTML.
• CDN (Content Delivery Network): Vercel or Netlify. Distributes your static assets to edge locations worldwide.
• Serverless Functions: Handle dynamic bits like form submissions or auth.

Use Cases

• Marketing Websites: Landing pages, Corporate blogs, Portfolios.
• Documentation: Massive sites like MDN or Stripe Docs are often static.
• E-Commerce: Product pages are pre-rendered for SEO, while “Cart” and “Checkout” are client-side dynamic.

Implementation Guide

We will build a blog using Next.js (SSG) and a mock Headless CMS API.

Prerequisites

• Node.js v18+

Step 1: The Headless CMS (Mocked)

Imagine this is Strapi or Sanity. We just fetch JSON.

/* lib/api.js */
export async function getPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  return res.json();
}

export async function getPost(id) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  return res.json();
}

Step 2: Static Site Generation (Next.js)

In pages/posts/[id].js, we use getStaticProps to tell Next.js to build this page before deploying.

/* pages/posts/[id].js */
import { getPost, getPosts } from '../../lib/api';

// 1. Tell Next.js how many pages to build
export async function getStaticPaths() {
  const posts = await getPosts();
  // Generate /posts/1, /posts/2...
  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: 'blocking' };
}

// 2. Fetch data for a single page at Build Time
export async function getStaticProps({ params }) {
  const post = await getPost(params.id);
  
  // Incremental Static Regeneration (ISR)
  // Re-generate this page at most once every 60 seconds
  return {
    props: { post },
    revalidate: 60, 
  };
}

// 3. The React Component
export default function Post({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  );
}

Step 3: Deployment (Vercel)

The magic of Jamstack is “Git-based Deployment”.

1. Push code to GitHub.
2. Connect Repo to Vercel.
3. Vercel detects Next.js, runs npm run build, and deploys to the Edge.
4. Any push to main updates the site instantly.

Production Readiness Checklist

[ ] ISR (Incremental Static Regeneration): Ensure revalidate is set. You don’t want to rebuild the entire 10,000-page site just to fix one typo. [ ] Image Optimization: Use next/image to automatically resize and serve WebP images based on the user’s viewport. [ ] Preview Mode: Configure “Preview URLs” so editors can see draft content from the CMS before it goes live. [ ] Webhooks: Configure the CMS to send a webhook to Vercel/Netlify to trigger a rebuild when content is published. [ ] CDN Caching: Verify Cache-Control headers. Static assets should be immutable (max-age=31536000).