MODRACXKENNETH D'SILVA

← Archive & Insights

JAMstack E-Commerce: Static Generation & Dynamic Hydration

JAMstack architecture serves pre-rendered HTML static shells directly from global CDNs while dynamically hydrating pricing and cart state client-side via GraphQL APIs.

By Kenneth D'Silva • Reading Time: 36 min read • Category: Architecture & Cloud

Dynamic Cart Hydration React Hook

// React Hook for Client-Side Cart State Hydration on Static Pages
import { useEffect, useState } from 'react';

export function useCartState() {
  const [cart, setCart] = useState(null);

  useEffect(() => {
    // Fetch live customer cart state after static HTML render
    fetch('/api/cart')
      .then(res => res.json())
      .then(data => setCart(data));
  }, []);

  return cart;
}

Suggested & Related Reading

Explore related engineering guides from Kenneth D'Silva: