Data flow & Fetching strategy

This section explains how data flows through the FrontWing storefront – from the Sylius API to the UI – and how different layers handle data fetching, caching, and rendering.

High-level flow

• Data source: All product, cart, customer and taxonomy data is fetched from the Sylius API (/api/v2/shop/...).

• Remix Loaders: Each route has its own loader() function, which fetches required data on the server.

• defer() & Suspense: For large or non-critical data (like reviews, associations), defer() is used to stream data and improve initial render.

• Context: Shared data (like the order token and cart) is stored in React Context (OrderContext) and synced with cookies and API.

• Client-side fetches: For actions like adding to cart, submitting reviews, or updating profile, the app uses fetch() via API clients.

---

Server vs. Client

Layer	Purpose	Example
SSR Loaders	Preload data before render	loader() in product.tsx
Context (React)	Persist session-level state	OrderContext, CustomerContext
API Clients	Perform mutations and POSTs	addToCartAPIClient()

Strategy Highlights

• Product pages preload all critical data via SSR

• Cart state is shared between pages via OrderContext

• Variants, options and associations are memoized where possible to avoid unnecessary re-renders

• Lazy data (e.g. attributes, reviews) loads in background using <Suspense>

• Fast first paint is prioritized over fetching everything up front

Frontend data flow