Building Mid Engine Co with Astro
Mid Engine Co is a custom storefront backed by Shopify. Its browser app loads public product data, manages each visitor’s cart, and sends buyers to Shopify checkout. Here is what an Astro version could look like—and the additional rendering decisions that would come with it.
A likely Astro architecture
- Render product and collection pages as HTML. Astro can fetch product data from Shopify while building the site, or fetch it on the server for each request.
- Make the cart an interactive browser island. The cart belongs to the visitor, so browser code would create or retrieve that visitor’s Shopify cart and update it as they shop.
- Hand checkout to Shopify. The storefront sends the buyer to the checkout URL returned for their cart.
Astro supports both pre-rendered pages and on-demand server rendering. Its islands architecture lets the product page arrive as HTML while only interactive pieces, such as the cart, load browser JavaScript. Astro rendering modes · Astro islands
Decisions the Astro implementation needs
- When product data becomes HTML. Build-time generation is quick to serve, but a product change can require rebuilding pages. Request-time rendering keeps data fresher, but adds a server runtime and makes page delivery depend on the Shopify API unless caching is designed around it.
- How product changes refresh generated pages. For a static build, Shopify updates need to trigger a rebuild or a targeted regeneration mechanism. Otherwise page copy, pricing, or availability can lag behind the catalog.
- How dynamic product routes are generated. The build needs to discover product and collection handles, handle pagination and variants, and decide what happens when a product is added or removed.
- Where the browser/server boundary sits. The cart must use the real visitor’s cart identity. If any cart or account data is fetched server-side, responses must not leak between visitors through shared page or CDN caches.
- Which pieces hydrate and when. Astro pages are HTML by default; interactive cart controls need client JavaScript and a hydration strategy. The team must wire the island to the existing cart behavior and state.
- How the Shopify integration and deployment fit together. A server-rendered setup needs an Astro adapter and deployment runtime. Build-time Shopify credentials and server-only secrets also need to stay out of browser bundles.
What changes with Spache
With Spache, Mid Engine Co keeps its SPA and its existing browser-side Shopify integration. Spache prepares the anonymous public product page and serves that rendered HTML; then the visitor’s app starts in their browser and loads their own cart. The cart is not part of the shared render.
That means there is no Astro adapter to deploy, no Astro product-page rendering mode to choose, and no Astro island to build for the cart. Spache still has cache freshness and invalidation settings, and public product data must be kept current—but the existing app does not need to be restructured into build-time pages, server-rendered pages, and hydrated islands just to provide rendered HTML.
Technical considerations
For each concern, Astro provides a way to implement it; the team still chooses and connects the pieces. Spache’s “Automatic” means the existing SPA flow handles it without implementing an Astro rendering layer. JSON GET responses are captured automatically; capture rules are only needed for non-GET requests. Catalog freshness remains configurable.
| Technical consideration | Astro implementation | Spache implementation |
|---|---|---|
| Product data in crawlable HTML | Fetch Shopify catalog data at build time or during server rendering, then render it into the product page. | Automatic |
| Product and collection routes | Map Shopify handles to Astro routes; for static output, enumerate products and collections during the build. | Automatic |
| Catalog freshness | Trigger rebuilds or configure request-time rendering and response caching when products change. | Automatic, configurable |
| Visitor-specific cart | Build a client island that loads and updates the current visitor’s Shopify cart. | Automatic |
| Keep personal data out of shared HTML | Keep cart/account requests in the browser, or carefully isolate and disable shared caching for personalized server responses. | Automatic |
| Interactive app behavior | Choose Astro client islands and hydration timing for cart controls and other interactive components. | Automatic |
| Rendering deployment | Choose static build hosting, or add an Astro adapter and server runtime for on-demand rendering. | Automatic |
Astro is a strong choice if the goal is to build a new HTML-first storefront and deliberately minimize browser JavaScript. Spache is a different trade: keep the working SPA and add a ready-to-serve public render, without making the application adopt a new rendering architecture.