Magento PWA Studio Preset

Preset files: presets/magento-pwa.toml (bot-only) and presets/magento-pwa-render-all.toml (render-all)

Works with PWA Studio v12-v14, Venia storefront, and custom Magento PWA builds using Apollo + GraphQL.

Overview

Magento PWA Studio (Venia) is a React-based storefront that fetches all data via GraphQL. It uses intersection observers for product grids, shimmer loading placeholders, and a mega menu that stays hidden until React hydration completes. PRISM addresses all of these with auto-scrolling, post_wait_js, and an extended timeout.

Two Modes

PRISM ships two presets for Magento PWA:

Bot-Only Mode (Default)

Only bots receive rendered HTML. Scripts are stripped, hydration attributes removed, and content validation is enabled. This is the standard SEO use case.

presets/magento-pwa.toml

[render]
wait_for = "networkidle"
timeout_secs = 30
block_resources = ["media"]
post_wait_js = """
document.querySelectorAll('[class*="megaMenu"]').forEach(el => el.classList.remove('hidden'));
document.querySelectorAll('[class*="shimmer"]').forEach(el => el.remove());
"""

[render.postprocess]
enabled = true
strip_scripts = true
strip_event_handlers = true
strip_hydration_attrs = true
resolve_lazy_images = true

[render.content_validation]
enabled = true
min_text_length = 50
require_title = true
min_html_bytes = 512

Render-All Mode

All visitors receive pre-rendered HTML. Scripts and event handlers are preserved so React can hydrate and provide interactivity (cart, search, account). Content validation is disabled because every visitor is served.

presets/magento-pwa-render-all.toml

[server]
mode = "render-all"

[render]
wait_for = "networkidle"
timeout_secs = 30
block_resources = []
post_wait_js = """
document.querySelectorAll('[class*="megaMenu"]').forEach(el => el.classList.remove('hidden'));
document.querySelectorAll('[class*="shimmer"]').forEach(el => el.remove());
"""

[render.postprocess]
enabled = true
strip_scripts = false          # Keep for hydration
strip_event_handlers = false   # Keep for interactivity
strip_hydration_attrs = false  # Keep for React reconciliation
strip_noscript = true
strip_comments = true
resolve_lazy_images = true

[render.content_validation]
enabled = false

Mega Menu Fix

Venia's mega menu has a hidden CSS class that React removes during hydration. In bot-only mode, scripts are stripped before hydration occurs, leaving the menu invisible. The post_wait_js forces it visible:

document.querySelectorAll('[class*="megaMenu"]').forEach(el => el.classList.remove('hidden'));

Shimmer Removal

Venia uses shimmer (skeleton) loading placeholders while GraphQL data loads. Even after data arrives, some shimmer elements may persist in the DOM. The post_wait_js removes them:

document.querySelectorAll('[class*="shimmer"]').forEach(el => el.remove());

GraphQL Timing

Magento PWA makes multiple GraphQL requests on page load (navigation, category tree, CMS blocks, product data). The timeout_secs = 30 allows time for all queries to complete, especially on stores with large catalogs or slow Magento backends.

The networkidle wait strategy ensures PRISM waits until all GraphQL responses have been received and React has re-rendered with the data.

Resource Blocking

In bot-only mode, media resources are blocked to speed up rendering:

block_resources = ["media"]

In render-all mode, no resources are blocked since humans need the full experience:

block_resources = []

Content Validation Thresholds

Magento product pages can have short descriptions, so the thresholds are lower than the defaults:

[render.content_validation]
min_text_length = 50    # Short product names/descriptions
min_html_bytes = 512    # Smaller pages

Route Exclusions

Both presets exclude GraphQL endpoints, REST API, media/static assets, and Venia build artifacts:

[routes]
exclude = [
    "/graphql", "/rest/**",
    "/media/**", "/static/**", "/venia-static/**",
    "**/*.js", "**/*.css", "**/*.json",
    "**/*.png", "**/*.jpg", "**/*.jpeg", "**/*.gif", "**/*.svg", "**/*.ico",
    "**/*.woff", "**/*.woff2", "**/*.ttf", "**/*.wasm", "**/*.map",
    "/manifest.json", "/sw.js", "/robots.txt", "/sitemap.xml",
]

Choosing Between Modes

Factor	Bot-Only	Render-All
SEO indexing	Yes	Yes
Social media previews	Yes	Yes
Human visitors see pre-rendered HTML	No	Yes
First Contentful Paint for humans	SPA default	Faster (pre-rendered)
Interactivity (cart, search)	Native SPA	Hydration required
Chrome tab usage	Bot traffic only	All traffic
Resource requirements	Lower	Higher

For most Magento PWA deployments, bot-only mode is recommended. Use render-all only if you need faster FCP for all visitors and have sufficient Chrome tab capacity.