What problem does it solve? Monolithic commerce themes often deliver slow page loads and poor Core Web Vitals, hurting SEO and conversion. This Skill guides you through building a Jamstack storefront that pre-renders product pages as static HTML served from a CDN, while keeping cart, checkout, and pricing fresh through client-side islands and incremental static regeneration. ## Core Features & Use Cases - Static Product Pages with ISR: Generate top product pages at build time with Next.js generateStaticParams and revalidate them on a timed interval or on demand, so large catalogs stay fast without slow builds. - Astro Zero-JS Storefronts: Server-render catalog pages in Astro and hydrate only interactive islands like the add-to-cart button, minimizing shipped JavaScript. - Webhook-Driven Cache Invalidation: Implement a secured /api/revalidate endpoint that uses revalidatePath and revalidateTag so flash-sale price changes appear within seconds. - Client-Side Cart State: Persist a Zustand cart store to localStorage with quantity merging for static pages that have no server session. - Use Case: A fashion retailer with 12,000 Shopify products pre-builds its top 200 pages, renders the long tail on demand, and triggers targeted revalidation webhooks whenever merchandising updates a product. ## Quick Start Ask the AI to scaffold a Next.js App Router storefront with a Shopify Storefront API client, an ISR product page at app/products/[handle]/page.tsx, and a next.config.ts with CDN cache headers and image remote patterns.
