sfnext-data-fetching

name	sfnext-data-fetching
description	Implement server-side data fetching in Storefront Next using loaders, actions, and useScapiFetcher. Use when writing loader functions, making SCAPI calls, handling form submissions, or implementing interactive data fetching. Covers synchronous loaders, streaming patterns, createApiClients, and parallel requests. NOT for client-side Zustand state — see sfnext-state-management.

Data Fetching Skill

This skill covers server-side data fetching patterns in Storefront Next — loaders, actions, and the useScapiFetcher hook.

Overview

Storefront Next mandates server-only data loading. All SCAPI requests execute on the MRT server, never in the browser. Three mechanisms exist:

Mechanism	When It Runs	Use Case
loader	Route navigation	Initial page data
action	Form submission	Mutations (add to cart, update profile)
useScapiFetcher	User interaction	On-demand fetching (search suggestions, infinite scroll)

Loader Patterns

Loaders can be synchronous (returning promises for streaming) or async (awaiting critical data). Choose based on what the page needs:

• Sync loader — Returns promises directly. Enables streaming SSR: the shell renders immediately while data streams in. Best when all data can render progressively.
• Async loader — Awaits critical data before rendering. Use when data is required for SEO or the page shell (e.g., category name in breadcrumbs). Non-critical data can still be returned as promises for streaming.

  ():  {
     clients = (context);
     {
        : clients..({
            : { : { : params. } }
        }).( data),
        : clients..({
            : { : { : params. } }
        }).( data),
    };
}


   (): <> {
     clients = (context);

    
     category =  clients..({
        : { : { : params. } }
    }).( data);

     {
        category,  
        : clients..({
            : { : { : , : { : params. } } }
        }).( data),  
    };
}