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);
    })
  );
});

Hyvä Theme and Magento 2 PWA Development with PWA Studio aren’t just competing options; they’re actually two powerful technologies that can complement each other to boost your store’s performance. Hyvä really shines when it comes to speeding up page loads and making frontend development a breeze, while PWA Studio offers that app-like feel with offline capabilities and smooth responsiveness.

By combining these two, merchants can create a lightweight yet vibrant storefront that provides outstanding user experiences on any device. So, whether you’re aiming for faster page loads, improved SEO, or a mobile-first strategy, using Hyvä and PWA Studio together can set your Magento store up for success in the future.