How to Design an Optimal Shopping Cart Page ?

When designing an e-commerce website, the shopping cart page presents a unique technical challenge. Unlike product or content pages, it must:

• Seamlessly integrate into the rest of the site (header, footer, navigation, etc.).
• Display entirely dynamic information that depends on the user’s current shopping session.

This dual challenge raises a key question: What is the best rendering strategy for a shopping cart page?
Should it be fully server-rendered, like a classic page generated on demand?
Or should we adopt a hybrid approach, combining static rendering with dynamic user-specific data fetching?

The goal of this article is to explore this question in depth, analyzing constraints, required API calls, and possible optimization strategies.

1. Breaking Down the Structure of a Shopping Cart Page

1.1. The Balance Between Static and Dynamic Elements

A closer look at a shopping cart page reveals that it is not 100% dynamic. It contains structural elements that are present site-wide:

• The header, which often includes the menu, logo, country or currency selector, and sometimes a cart summary.
• The footer, displaying legal information and links to main store categories.
• Some global informational blocks, such as free shipping thresholds or product recommendations.

These elements could be pre-rendered during site deployment since they are not dependent on the cart’s contents.

Conversely, the page also includes fully dynamic data:

• Cart contents, which vary per user session.
• Taxes and shipping costs, often calculated based on the selected shipping region.
• User actions (adding/removing an item, modifying quantities).

This mix of content leads to the question: How can we optimize page rendering without degrading the user experience?

1.2. The Many API Calls Required for a Cart Page

To approach this issue, let’s break down all the necessary API calls for a shopping cart page.

1. API Calls for Global Site Context

These API requests are required to correctly display the header, footer, and other elements:

• Available countries and currencies (often needed for the header).
• Supported languages (to allow language switching).
• Collections or product categories, frequently shown in the footer.

These rarely change and could be fetched in advance, meaning they could be pre-rendered in a static page and served instantly.

2. API Calls Specific to the Shopping Cart

These requests are directly related to the cart's contents and are dynamic:

• Fetching the cart (cartID) to retrieve products in the cart.
• Calculating taxes and shipping fees, based on the user's region.
• Checking product availability, to avoid showing out-of-stock items.

Unlike the previous calls, these are user-specific and must be fetched dynamically.

1.3. How Do These API Calls Impact Performance?

The key issue here is simple:

• If we wait for all API calls to resolve before rendering the page, it significantly delays the display.
• But if we render the page too early, we risk showing an empty or incomplete layout, leading to a bad user experience.

This raises the question of the best rendering approach:

• If the page is entirely server-rendered (SSR), the user waits longer because the server must resolve all API calls before sending the page.
• If the page is fully client-rendered (CSR), it loads quickly, but remains empty until API calls complete.

2. Exploring a Hybrid Approach: A Static Base with Dynamic Content

2.1. Towards a More Efficient Strategy?

Given these observations, an interesting alternative emerges:

1. Pre-render the shopping cart page structure, including the header, footer, and global layout.
2. Fetch and inject only the cart’s contents dynamically via a client-side API request.

This strategy combines the best of both worlds:

• Ultra-fast initial rendering, since the static page is served from a CDN.
• A smooth user experience, with progressive data loading.

2.2. How Does This Work in Practice?

1. At build time, a static version of the cart page is generated, containing all global elements.
2. When a user accesses the page, they immediately receive this pre-rendered version.
3. A skeleton loader is displayed while waiting for real cart data.
4. A client-side API request fetches the cart, and the data is injected as soon as it’s available.

The result: the page appears fully loaded in milliseconds, even if the cart data arrives slightly later.

2.3. Can This Be Further Optimized?

One key consideration is that the cart is often already fetched in the background, for instance, to display the item count in the header.

Instead of making a redundant API request on the cart page, we can:

• Cache cart data (e.g., using useAsyncData in Nuxt with a cache key).
• Immediately use the cached response when loading the cart page.
• Refresh the data only if necessary (e.g., if the user modifies the cart).

This ensures an instant display of the cart without extra API calls.

Conclusion: Towards an Optimal Strategy?

By combining static rendering with smart client-side fetching, we achieve:

• Fast initial rendering with a CDN-served static page.
• Progressive hydration using skeleton loaders.
• Efficient caching, avoiding redundant API calls.

This hybrid approach seems to offer a solid balance between performance and user experience. Could it be further refined? Possibly! But as it stands, it provides a pragmatic and scalable solution for optimizing shopping cart pages.