Hyvä Theme and PWA Studio: A Synergistic Approach

Magento’s frontend ecosystem is evolving, with Hyvä Theme and PWA Studio emerging as two of the most powerful solutions. While traditionally seen as separate approaches, combining them strategically can create a fast, modern, and highly interactive Magento store.

Hyvä Theme: A Performance-Optimized Magento Frontend

Hyvä is a lightweight, server-side rendering (SSR) solution that significantly improves Magento’s Core Web Vitals and developer experience. It is a strong choice for Magento 2 frontend and Hyva theme development.

• Uses Alpine.js and Tailwind CSS instead of KnockoutJS and RequireJS.
• Reduces JavaScript dependencies for faster page loads.
• Fully compatible with Magento’s native checkout and backend.

PWA Studio: Magento’s Progressive Web App Solution

Progressive Web Application (PWA) is React-based, API-driven, and headless, focusing on a mobile-first, app-like experience.

• Uses Client-Side Rendering (CSR) and GraphQL APIs for data fetching.
• Enables offline support, push notifications, and a fast, interactive UI.
• Decouples the frontend from Magento’s backend for greater flexibility.

Rather than choosing one approach, a hybrid model allows Magento merchants to benefit from both.

Key Benefits of a Hybrid Hyvä + PWA Studio Approach

• Fast, SEO-friendly pages using Hyvä’s SSR.
• Interactive elements (e.g., product search, cart) powered by PWA Studio.
• GraphQL-driven UI enhancements without requiring a full headless setup.
• Offline support and push notifications for returning users.

Step 1: Install Hyvä Theme

Ensure Magento is installed and set up before adding Hyvä.

composer require hyva-themes/magento2-default-theme
bin/magento module: enable Hyva_Theme
bin/magento setup: upgrade
bin/magento setup:static-content: deploy -f

Step 2: Set Up PWA Studio

Clone PWA Studio and set up a project.

git clone https://github.com/magento/pwa-studio.git
cd pwa-studio
yarn install
yarn buildpack create-project my-hyva-pwa

Configure .env to connect PWA Studio to Magento:

MAGENTO_BACKEND_URL=https://yourmagentostore.com
CHECKOUT_BRAINTREE_TOKEN=your-braintree-token

Step 3: Use GraphQL for Dynamic Elements

Instead of a full headless approach, use GraphQL APIs to load real-time data into Hyvä while keeping its SSR structure.

Example GraphQL-powered product list using PWA Studio:

import { gql, useQuery } from ‘@apollo/client’;
const GET_PRODUCTS = gql
   query {
      products(filter: { category_id: { eq: “10” } }) {
        items {
          name
          price {
            regularPrice {
              amount {
                value
              currency
            }
            }
          }
        }
      }
     }
   }
;
const ProductList = () => {
   const { loading, error, data } = useQuery(GET_PRODUCTS);
   if (loading) return <p>Loading…</p>;
   if (error) return <p>Error fetching products</p>;
   return (
      <ul>
      {data.products.items.map((product) => (
        <li key={product.name}>{product.name} – ${product.price.regularPrice.amount.value}</li>
      ))}
      </ul>
   );
};
export default ProductList;

Step 4: Embed PWA Components in Hyvä Pages

Use Magento’s layout XML to insert a PWA-based React component inside Hyvä.

<referenceBlock name=”content”>
    <block class=”Magento\Framework\View\Element\Template” template=”Magento_Theme::react_component.phtml”/>
</referenceBlock>

Inside react_component.phtml:

<div id=”hyva-pwa-app”></div>
<script src=”https://yourpwa.com/static/js/main.js”></script>

This method allows Hyvä to handle core rendering while embedding PWA-based interactive components where needed.

1. Enable Server-Side Rendering for PWA Components

Since PWA Studio uses CSR, wrap dynamic components with an SSR-friendly loader.

Example: Use Next.js or React Server Components for SSR-based PWA elements.

import dynamic from ‘next/dynamic’;
const PWAProductList = dynamic(() => import(‘../components/ProductList’), {
  ssr: false,
});
export default function Page() {
  return ;
}

2. Preload GraphQL Data in Hyvä

Fetch product data in Hyvä before rendering React components.

$productData = $this->graphQlClient->query(‘
  {
    products(filter: { category_id: { eq: “10” } }) {
      items {
        name
        price {
          regularPrice {
            amount {
              value
              currency
            }
          }
        }
      }
    }
  }
‘);

3. Use Service Workers for Offline Support

Enhance PWA Studio by enabling Magento service workers for caching.

yarn run buildpack load-configuration

Modify service-worker.js:

self.addEventListener(‘fetch’, (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

A hybrid Hyvä + PWA Studio setup provides the best of both worlds:

• Hyvä for fast, SEO-friendly, and simple pages.
• PWA Studio for interactive, real-time elements where needed.
• GraphQL for dynamic data without a full headless transition.

This approach minimizes complexity while maximizing performance and UX. Would you like help implementing this strategy in your Magento store?