Si vous avez entendu dire que Shopify “fonctionne avec Remix”, ce n’est pas faux : Hydrogen (le framework JavaScript de Shopify pour des vitrines personnalisées) est construit sur les concepts de Remix—loaders, actions, routes imbriquées, rendu côté serveur—et Oxygen est l’hébergement edge de Shopify.

Cet article vous donne une vue d’ensemble, les compromis à connaître, et un plan de départ.

Qu’est-ce que Remix (en une minute) ?

Remix est un framework web full-stack centré sur les standards du web, l’amélioration progressive, et le rendu côté serveur par défaut. L’application est structurée avec des routes imbriquées. Chaque route peut exporter :

• un loader() pour récupérer des données côté serveur,
• une action() pour les mutations via formulaires,
• et un composant React qui rend l’interface.

Comme les loaders s’exécutent côté serveur, Remix favorise des réponses rapides et mises en cache tout en gardant les secrets hors du client. Il s’appuie aussi sur les formulaires et la sémantique HTTP—des capacités déjà natives du navigateur—ce qui réduit le JavaScript à livrer et améliore la fiabilité.

Pourquoi Shopify utilise Remix (via Hydrogen)

Le framework Hydrogen de Shopify adopte les primitives de Remix (routing et data) et ajoute des utilitaires e-commerce :

• Helpers Storefront API (GraphQL) pour produits, collections, paniers et clients.
• Rendu côté serveur avec streaming pour un Time-to-First-Byte optimal.
• Oxygen (hébergement edge mondial) pour une faible latence partout.
• Modèles intégrés pour SEO, optimisation d’images, et i18n.

Hydrogen ne remplace pas les thèmes Liquid (Online Store 2.0) ; c’est une voie distincte pour les équipes qui ont besoin d’une vitrine totalement personnalisée.

Avantages et inconvénients de Remix pour Shopify

Avantages

• Performance native : SSR + data loading par route ; cache edge simple à configurer.
• Bonne ergonomie développeur : données proches de l’UI ; moins d’effets useEffect côté client.
• Amélioration progressive : fonctionne sans JS, s’enrichit avec JS.
• Mutations fiables : action() + <Form> = ajout au panier ou login robuste.
• Intégration Shopify : Hydrogen apporte des utilitaires pour API Storefront, images, SEO.
• Prêt pour l’edge : déploiement sur Oxygen ou tout autre hébergeur compatible Remix.

Inconvénients

• Deux stacks à apprendre si vous venez uniquement de Liquid (Remix + APIs Shopify).
• Changement d’infrastructure : vous gérez une app front personnalisée (logs, CI/CD, monitoring).
• Compatibilité apps : beaucoup d’apps Liquid sont centrées sur les thèmes ; ici, il faut passer par app proxies ou APIs directes.
• Modélisation du contenu : pas de sections/blocs comme dans Liquid, donc besoin d’un CMS (Sanity, Contentful) ou des Métachamps/Métaobjets.

Quand choisir Liquid ou Remix (Hydrogen)

Choisissez Liquid (Online Store 2.0) si :

• Vous cherchez un temps de mise en ligne rapide, avec customisation de thème et compatibilité App Store.
• Les marchands/marketeurs doivent garder le contrôle via l’éditeur de thèmes.

Choisissez Remix/Hydrogen si :

• Vous avez besoin d’expériences totalement customisées (bundles, abonnements, configurateurs).
• Vous souhaitez un rendu edge SSR avec cache granulaire et sub-100ms TTFB.
• Votre équipe préfère React côté serveur et GraphQL.

De nombreuses marques combinent Liquid pour le cœur + Hydrogen pour des microsites (campagnes, labs produits).

Architecture type

• Frontend : Remix (Hydrogen) avec routes/components.
• Données : Shopify Storefront API (GraphQL) + CMS éventuel pour contenu.
• Auth : comptes clients via Storefront API ; Admin API côté serveur.
• Edge : Oxygen ou tout autre hébergeur Remix.
• Paiements/Checkout : Checkout Shopify via API Panier/Checkout et redirection.

Exemple minimal : page produit avec loader + composant

// app/routes/products.$handle/route.tsx
import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

const STOREFRONT_API_URL = `https://${process.env.SHOPIFY_STORE_DOMAIN}/api/2024-10/graphql.json`;
const STOREFRONT_TOKEN = process.env.SHOPIFY_STOREFRONT_TOKEN!;

export async function loader({ params }: LoaderFunctionArgs) {
  const handle = params.handle!;
  const query = `
    query ProductByHandle($handle: String!) {
      product(handle: $handle) {
        id
        title
        description
        handle
        featuredImage { url altText width height }
        variants(first: 10) {
          nodes { id title price { amount currencyCode } availableForSale }
        }
      }
    }
  `;
  const res = await fetch(STOREFRONT_API_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-Shopify-Storefront-Access-Token": STOREFRONT_TOKEN
    },
    body: JSON.stringify({ query, variables: { handle } })
  });
  const { data } = await res.json();
  if (!data?.product) throw new Response("Not Found", { status: 404 });
  return json({ product: data.product }, { headers: { "Cache-Control": "public, max-age=30, s-maxage=300, stale-while-revalidate=86400" } });
}

export default function ProductRoute() {
  const { product } = useLoaderData<typeof loader>();
  return (
    <main className="mx-auto max-w-4xl p-6">
      <h1 className="text-3xl font-bold">{product.title}</h1>
      {product.featuredImage && (
        <img
          src={product.featuredImage.url}
          alt={product.featuredImage.altText ?? product.title}
          width={product.featuredImage.width}
          height={product.featuredImage.height}
          loading="eager"
          fetchPriority="high"
          className="mt-4 w-full rounded-xl"
        />
      )}
      <p className="mt-4 opacity-80">{product.description}</p>
      <form method="post" className="mt-6">
        <input type="hidden" name="variantId" value={product.variants.nodes[0]?.id} />
        <button type="submit" className="rounded-xl px-5 py-3 font-medium border">
          Ajouter au panier
        </button>
      </form>
    </main>
  );
}

TL;DR

• Liquid : idéal pour un lancement rapide avec compatibilité App Store.
• Remix/Hydrogen : idéal pour une expérience custom et performance edge, mais nécessite plus de maîtrise technique.
• Commencez petit, testez avec un microsite Hydrogen, puis élargissez progressivement.