Idrogeno vs liquido: la guida dell'architetto tecnico alla migrazione

Se sei un CTO o un ingegnere capo, probabilmente hai raggiunto il “soffitto liquido”. Il liquido è fantastico per i negozi semplici. Ma quando si tenta di implementare una gestione complessa dello stato, la personalizzazione o l’integrazione di API di terze parti, diventa un pasticcio di “Spaghetti jQuery”. Shopify Hydrogen (basato su Remix) è la risposta. Non è solo un “tema”; è un’applicazione full-stack.

Il cambiamento dell’architettura

In Liquid, tutto avviene sui server di Shopify. Hai un controllo limitato. In Hydrogen, possiedi Edge.

“sirena”. grafico TD Utente[Browser Utente] —>|Richiesta| Edge[Operaio Cloudflare (Ossigeno)]

sottografo "La tua logica applicativa"
Edge -->|Controlla cache| Cache{È memorizzato nella cache?}
Cache -->|Sì| Utente
Cache -->|No| Remix[Caricatore remix]
fine

Remix -->|GraphQL| Vetrina[API vetrina Shopify]
Remix -->|RESTO| Terze parti[ERP/CMS/PIM]

Vetrina -> Remix
3rdParty --> Remix
Remix -->|Stream HTML| Utente

### Perché è importante
Con Liquid, non è possibile recuperare facilmente i dati da un ERP esterno *prima* di eseguire il rendering della pagina. È necessario utilizzare il recupero lato client (useEffect), che porta a **Cumulative Layout Shift (CLS)** e a un'esperienza utente scadente.
Con Hydrogen, recuperiamo **sul server**. L'utente vede immediatamente la pagina completamente formata con i dati ERP.

## Confronto delle caratteristiche: i limiti del liquido

| Caratteristica | Liquido (legacy) | Idrogeno (Reagire/Remixare) |
| :--- | :--- | :--- |
| **Percorso** | Rigido (`/prodotti/*`, `/collezioni/*`) | Dinamico (`/prodotti/colore/blu`) |
| **Gestione dello Stato** | Nessuno (dipendenza dal DOM) | Robusto (Contesto / Zustand) |
| **Test** | Solo regressione visiva | Unit & E2E (Vitest/Drammaturgo) |
| **DX (esperienza di sviluppo)** | Scarso (ritardi di sincronizzazione del Themekit) | Eccellente (HMR, TypeScript) |
| **Prestazioni** | Buono (ma incontrollabile) | Eccellente (Streaming SSR) |

## Guida all'implementazione: il tuo primo percorso

In Liquid, la pagina di un prodotto è un enorme file "product.liquid".
In Hydrogen, è un modulo di percorso pulito.

"dattiloscritto".
// app/routes/($locale).products.$handle.tsx
import {defer} da '@shopify/remix-oxygen';
import {Await, useLoaderData} da '@remix-run/react';

// 1. Il caricatore (lato server)
esporta funzione asincrona caricatore({ params, context }: LoaderArgs) {
  const {handle} = parametri;
  
  // Recupera i dati critici (attendi)
  const prodotto = attendono contesto.storefront.query(PRODUCT_QUERY, {
    variabili: { handle },
  });

  // Recupera i dati non critici (trasmettili in streaming)
  const recensioni = context.yotpo.fetchReviews(product.id);

  if (!prodotto) lancia una nuova risposta(null, { status: 404 });

  differimento del reso({ prodotto, recensioni });
}

// 2. Il componente (lato client)
esporta la funzione predefinita PaginaProdotto() {
  const {prodotto, recensioni} = useLoaderData();

  ritorno (
    <div className="griglia-prodotto">
      <ProductGallery media={product.media.nodes} />
      <ProductDetails titolo={prodotto.titolo} prezzo={prodotto.prezzoRange} />
      
      {/* 3. Suspense per i contenuti in streaming */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <Aspetta risoluzione={recensioni}>
          {(dati) => <dati ElencoRecensioni={dati} />}
        </Aspetta>
      </Suspense>
    </div>
  );
}

Strategia migratoria: il modello strangolatore

Non ricostruire l’intero sito in un giorno. Usa il Schema del fico strangolatore.

1. Fase 1: lancia Hydrogen su un sottodominio (“experimental.brand.com”).
2. Fase 2: instradare il traffico per la “Nuova raccolta” a Hydrogen tramite Cloudflare Workers.
3. Fase 3: mantieni il pagamento e l’account liquidi (per ora). Ciò riduce il rischio quasi a zero.

Conclusione

Il liquido è un soffitto. L’idrogeno è un pavimento. Se prevedi di scalare fino a $ 50 milioni +, hai bisogno della parola.

---

---

Colpito dal soffitto?

Siamo specializzati in migrazioni di idrogeno ad alte prestazioni. Assumi i nostri architetti.