skills.rest
decocms
decocmsOFFICIAL
Explore all skills by this author →
Website𝕏@deco_cmsGitHub

deco-variant-selection-perf

Replace variant URLs client-side to eliminate duplicate server calls on Deco TanStack storefronts.

5|2|Updated Feb 26, 2026
Search Tags:#prefetch#storefront#variant#tanstack-start#loading-states#deco
One-click install
npx skills add https://github.com/decocms/deco-start --skill deco-variant-selection-perf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: deco-variant-selection-perf
Source: https://github.com/decocms/deco-start/tree/main/.cursor/skills/deco-variant-selection-perf
Command: npx skills add https://github.com/decocms/deco-start --skill deco-variant-selection-perf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines variant navigation on Deco TanStack storefronts by eliminating server re-fetches when switching SKUs of the same product, and by preventing double-fetches caused by hover prefetch and click navigation.

Core Features & Use Cases

  • Zero-fetch same-product variant updates via URL state replacement.
  • Cross-product variant navigation with loading indicators to keep UI responsive.
  • Removal of preload on variant links to prevent duplicate server calls.
  • No reliance on skuId in URL for variant data; all data is pre-resolved.

Quick Start

Implement zero-fetch same-product variant switching by replacing the variant links with a client-side URL update using replaceState.

Frequently Asked Questions about deco-variant-selection-perf

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I stop duplicate server calls during variant navigation on a Deco storefront?▼

You can eliminate duplicate server calls during variant navigation by using replaceState for same-product SKU switches. This updates the URL client-side without triggering a server refetch, suppressing unnecessary prefetching to minimize server traffic.

Why does hover prefetch cause double-fetching on TanStack Start product pages?▼

Hover prefetch causes double-fetching because the browser requests variant data on mouse-over and again on click. You can resolve this by removing the preload attribute on variant links and suppressing unnecessary prefetching to minimize server traffic.

How do I handle cross-product variant switching with a loading state in Deco?▼

For cross-product variant switching where data is not fully pre-loaded, use the navigate function to trigger a server request while displaying a loading indicator. This keeps the UI responsive during the data fetch.

Can I update product variant URLs without relying on skuId for variant data?▼

Yes, you can update variant URLs without relying on skuId for variant data. The system pre-resolves all necessary data, allowing instant client-side URL updates via replaceState for same-product SKU switches without a server roundtrip.

What is the best way to switch same-product SKUs without fetching data again?▼

The best way to switch same-product SKUs without fetching data again is using replaceState for client-side URL updates. Assuming all variant data is pre-loaded, this provides instant visual updates without server traffic.

Related Skills

Explore More Software Engineering Skills→
decocmsdecocms
5

deco-to-tanstack-migration

Migrate Deco.cx storefronts from Fresh/Preact to TanStack Start/React on Cloudflare Workers.

Official
Advanced
algusaemalgusaem

react-ui-patterns

Codify loading, error, and empty state patterns for React components.

Community
Basic
lespacemanlespaceman
4

react-start/server-components

Build and refactor TanStack Start React Server Components with RSC APIs.

Community
Advanced
Cyberworld-buildersCyberworld-builders

nextjs-server-navigation

Implement Next.js Server Component navigation with `<Link>` and `redirect()`.

Official
Basic