Storefronts custom em 2026
Em 2026, storefronts custom respondem por uma fatia crescente do varejo digital. A onda do headless commerce, que começou com B2B e enterprises, hoje atinge marcas DTC de tamanho médio. As razões são performance (Core Web Vitals), liberdade de design, integração nativa com CMS especializado, e capacidade de orquestrar microservices (catálogo, checkout, busca, recomendação) em uma camada de orquestração própria.
Frameworks comuns: Next.js (com App Router ou Pages), Nuxt 3, Remix (agora React Router 7), SvelteKit, Astro. Backends headless: Shopify Hydrogen, Saleor, Commerce.js, BigCommerce headless, Vendure, Medusa, Vtex IO React. Para casos onde a loja precisa de stack completamente custom, frameworks de UI rodam contra APIs próprias.
A flexibilidade tem um preço: cada storefront custom é único, e adicionar scripts de terceiros requer atenção a SSR, hydration, navegação client-side, CSP, e bundle splitting. Este guia cobre o que importa para integrar o Provou em storefronts custom sem comprometer performance ou segurança.
Onde colar o script (head, body, defer)
O snippet base:
``html <script src="https://cdn.provou.app.br/v1.js" data-store="sua-loja" async></script> ``
Em SSR (server-side rendering), o snippet entra no HTML retornado pelo servidor. Em SPAs puras (CSR), entra no index.html ou no template HTML que serve o app shell.
Pontos de inserção:
- `<head>` com `async`: recomendado. O navegador faz fetch em paralelo ao parse do HTML. Quando
v1.jschega, ele executa imediatamente, mas como o widget é inicializado emDOMContentLoaded, não bloqueia render. - `<head>` com `defer`: alternativa. Difere a execução até o parse acabar. Funciona, mas
asyncé mais agressivo. - Final do `<body>`: legado. Funciona, mas perde a paralelização de fetch.
Em Next.js 14+ (App Router), o caminho canônico é <Script> componente do next/script:
```tsx import Script from 'next/script';
export default function RootLayout({ children }) { return ( <html lang="pt-BR"> <body> {children} <Script src="https://cdn.provou.app.br/v1.js" strategy="afterInteractive" data-store="sua-loja" /> </body> </html> ); } ```
O strategy="afterInteractive" carrega após hidratação inicial, mantendo TTI baixo.
SPA vs SSR: cuidados extras
Em SSR puro (cada navegação dispara nova requisição ao servidor), o snippet carrega uma vez por sessão. Em SPA (navegação client-side, comum em todas as soluções modernas), há armadilha: o widget hidrata na primeira página visitada, e em troca de rota o componente do widget pode ser desmontado.
O Provou trata SPA navigation automaticamente, escutando eventos do History API (pushState, popstate) e re-hidratando quando necessário. Mas há casos onde a navegação é gerenciada por um router que não usa History API (raro em 2026, mas existe). Nesse cenário:
```tsx // Em troca de rota import { useEffect } from 'react'; import { usePathname } from 'next/navigation';
function ProvouRehydrator() { const pathname = usePathname(); useEffect(() => { if (typeof window !== 'undefined' && window.Provou?.rehydrate) { window.Provou.rehydrate(); } }, [pathname]); return null; } ```
Em Hydrogen ou Saleor com Next.js, o mesmo padrão se aplica.
Headless commerce (Shopify Hydrogen, Saleor, BigCommerce)
Shopify Hydrogen
Hydrogen é o framework oficial Shopify para storefronts custom (baseado em Remix). Para integrar Provou:
- Em
app/root.tsx, adicione o<Script>em<Layout>. - Use o storefront token Shopify para acessar o catálogo.
- Sincronize o catálogo Shopify com o Provou via Storefront API.
Saleor
Saleor é open source, com storefront em Next.js (template Saleor Storefront ou custom). Snippet entra no layout root.
BigCommerce Headless
BigCommerce expõe Storefront API e Catalog API. Snippet via Next.js ou Nuxt template. Para mais detalhes, leia o post sobre WooCommerce que cobre temas paralelos.
Eventos de analytics (postMessage, CustomEvent)
O widget Provou emite eventos client-side que você pode escutar para enriquecer analytics. Dois caminhos:
CustomEvent
``javascript window.addEventListener('provou:recommendation', (e) => { const { sku, size, confidence } = e.detail; if (window.gtag) { window.gtag('event', 'size_recommended', { sku, size, confidence }); } }); ``
postMessage
Para isolamento extra, o widget também emite via postMessage em cenários onde renderiza em iframe. Padrão: { type: 'provou:event', name, payload }.
``javascript window.addEventListener('message', (e) => { if (e.data?.type === 'provou:event' && e.data.name === 'recommendation_computed') { // forward to analytics } }); ``
Eventos disponíveis: widget_loaded, widget_opened, chart_viewed, recommendation_computed, widget_closed.
CSP e CORS para third-party scripts
Storefronts custom em 2026 frequentemente rodam com Content Security Policy estrito. Para o Provou funcionar, adicione:
``http Content-Security-Policy: script-src 'self' 'unsafe-inline' https://cdn.provou.app.br; connect-src 'self' https://cdn.provou.app.br https://api.provou.app.br; style-src 'self' 'unsafe-inline' https://cdn.provou.app.br; ``
Em Next.js, configure CSP em middleware.ts ou em headers do hosting.
CORS não é um problema: o widget faz requisição GET para tabelas estáticas via CDN, com cabeçalhos abertos.
Trusted Types (W3C, suporte parcial em 2026): se sua loja usa Trusted Types, o Provou já emite scripts via API segura. Para configurar a policy, contate o suporte no painel.
Testes com Lighthouse e Playwright
Lighthouse
Rode Lighthouse em duas variantes: antes e depois da instalação. Compare LCP, INP, CLS, TBT. Em testes em storefronts Hydrogen, Saleor e Next.js custom, scores mantêm-se idênticos.
``bash npx lighthouse https://sua-loja.com/produto/123 --output html --output-path before.html # instale Provou npx lighthouse https://sua-loja.com/produto/123 --output html --output-path after.html ``
Playwright
Para testes E2E em CI, use Playwright para validar:
```typescript import { test, expect } from '@playwright/test';
test('Provou widget loads on PDP', async ({ page }) => { await page.goto('/produto/vestido-midi'); await page.waitForFunction(() => window.Provou?.ready === true); const button = page.getByRole('button', { name: /provador virtual/i }); await expect(button).toBeVisible(); await button.click(); await expect(page.getByText(/qual seu tamanho/i)).toBeVisible(); }); ```
Boas práticas para o time técnico
- Centralize o snippet em um componente reutilizável (
<ProvouScript />em React, plugin em Vue/Nuxt). - Use feature flag para liga/desliga por ambiente (staging vs prod).
- Monitore erros do widget via Sentry ou similar. O widget expõe
window.Provou.onError. - Sincronize o catálogo via API, não via CSV manual, em storefronts custom. Workflow CI/CD facilita.
- Documente a integração no repo (
docs/provou.md). - Configure CSP estrito: aceite só os domínios que precisa, não 'unsafe-inline' generalizado.
- Teste em staging com Lighthouse e Playwright antes de promover.
- Monitore Core Web Vitals em produção via Web Vitals API + GA4.
Para começar, abra o cadastro gratuito, copie o slug, integre via componente <Script> no seu framework e teste em staging. Em uma sprint o storefront custom está com Provou rodando.
Para perfis de plataforma SaaS, veja os guias de Shopify, VTEX e Magento no blog. Para a estratégia de conversão e ROI, leia aumentar conversão e ROI passo a passo.
Performance avançada e edge runtime
Storefronts custom em 2026 frequentemente rodam em edge runtimes (Vercel Edge, Cloudflare Workers, AWS Lambda@Edge, Deno Deploy). O Provou foi desenhado para se integrar limpo a esse perfil:
- CDN edge: o script
v1.jsé servido por edges no Brasil (São Paulo, Rio, Fortaleza) e na América Latina. Latência típica abaixo de 60 ms para usuários no Sudeste. - Tabelas estáticas: as tabelas de medidas publicadas são JSONs imutáveis em CDN, com TTL longo. Cache hit rate típico acima de 95%.
- Sem dependência de servidor: a recomendação computa client-side em milissegundos. Não há roundtrip para um backend Provou em path crítico.
- HTTP/3 e Brotli: o bundle é servido com compressão moderna, reduzindo bytes em rede.
Em testes em storefronts Hydrogen rodando em Vercel Edge, o impacto em LCP foi medido em menos de 5 ms (margem de erro). INP e CLS ficam em zero. Para auditar em sua operação, use Lighthouse + Real User Monitoring (RUM) via Web Vitals API.
SDK roadmap e tipos TypeScript
Para times técnicos que preferem APIs explícitas, o Provou expõe um conjunto de hooks no window.Provou:
``typescript declare global { interface Window { Provou?: { ready: boolean; onReady: (cb: () => void) => void; open: (sku?: string) => void; close: () => void; rehydrate: () => void; disable: () => void; onError: (cb: (e: Error) => void) => void; }; } } ``
A API é estável desde a v1.0 e segue semver. Quebras de contrato são raras e sempre precedidas por aviso no painel.
Um pacote npm oficial (@provou/sdk) está em roadmap, com tipos TypeScript completos, helpers para SSR e middleware Next.js. Para acompanhar, monitore o painel ou inscreva-se na newsletter do produto.
Boas práticas finais para o time técnico
- Code review: trate a integração como qualquer dependência de terceiros. Auditoria de CSP, monitoramento de erros, testes E2E.
- Feature flag: liga/desliga por ambiente, por canal, por experimento. Permite rollback rápido.
- Observabilidade: monitore eventos do widget no APM (Datadog, New Relic, Sentry). Alertas para queda anômala de
recommendation_computed. - Documentação interna: registre a integração no repositório (
docs/provou.md) com snippet, configuração, contatos. - Sincronização de catálogo: prefira webhook ou ETL recorrente em vez de upload manual. Em catálogos com mais de 5 mil SKUs, automação é obrigatória.
Para começar, abra o cadastro gratuito e a demo ao vivo. Em uma sprint o storefront custom está validado em staging; em duas, está em produção. Veja também os guias de Shopify, VTEX e Magento para perspectivas de plataforma SaaS.
Storefronts custom em 2026 oferecem o teto técnico mais alto do varejo digital. A contrapartida é a responsabilidade pelo stack inteiro. Provou foi desenhado para se integrar limpo a esse perfil: um snippet, um endpoint, eventos via DOM API. Sem framework proprietário, sem dependência circular, sem surpresa em build.