Caching in Salesforce Composable Storefront

When working with the Salesforce Composable Storefront, performance and speed play an important role in how users experience your site. One of the key techniques to improve performance is caching. Caching helps pages load faster, reduces server processing, and improves SEO.

How It Differs from SFRA

In SFRA, the front-end and back-end were tightly connected. In the Composable Storefront, the front-end (PWA Kit) and the back-end are separate. Because of this separation, caching must be managed differently.

Server-Side Rendering (SSR)

The Composable Storefront uses Server-Side Rendering (SSR), which means the server generates and sends fully prepared HTML to the browser. This helps with:

Faster initial page display
Better search engine indexing
Proper link previews when shared on social platforms

To get the most benefit from SSR, the generated HTML should be cached.

Without caching, the server must do a lot of work for every first-time visit, such as:

Why Caching Helps

Without caching, the server must do a lot of work for every first-time visit, such as:

Setting up SLAS sessions
Fetching menu categories
Loading content (Product Search, Page Designer, etc.)
Rendering React components

This can slow down the time until users see content. With caching, these steps don't need to happen for every new visitor.

Example of enabling caching in the code:

         

const Home = () => {
    const {res} = useServerContext();

    if (res) {
        res.set(
            'Cache-Control',
            `s-maxage=3600, stale-while-revalidate=300`
        );
    }
}

CDN Caching

The CDN layer (currently CloudFront) stores and delivers cached versions of pages. The default cache time is 15 minutes, but in a real project, it is usually better to increase it to a few hours. Just remember that clearing cache is not automatic after code deployments. Cache can be manually cleared from Business Manager.

API Caching (SCAPI & OCAPI)

The storefront communicates with the backend using APIs. These API responses are also cached.

OCAPI

Important points:

Some 404 responses may also be cached if enabled.
Cache clearing after replication may take up to 15 minutes.
You can manually clear the cache in Business Manager under Site Cache settings.

Custom Cache Controls

To change cache duration in custom API code:

response.setExpires(Date.now() + 3600000);

To vary cached responses when personalization is required:

response.setVaryBy("price_promotion");

Wrap-Up

Caching is essential for performance in the Composable Storefront. By combining SSR caching, CDN caching, and API caching, you can improve page load speed and user experience. Understanding how caching works allows you to build faster and more efficient storefronts.

Have any questions? Feel free to drop an email to support@astreait.com or visit astreait.com to schedule a consultation.

Caching in the Salesforce Composable Storefront