Render a cart from client side

Returning cart data, along with other data that builds a page, from a Remix loader server-renders the cart. However, if you want to turn on cache control for a page, then the cart shouldn't be server-rendered because carts are user-specific and should never be shared across different user sessions.

The cache control header structure is public, max-age=1, stale-while-revalidate=9. There are many other cache-control configurations available, but this guide focuses on the private and public modes:

• private: Only the client browser is allowed to cache the request. No servers are allowed to cache the content. private mode is helpful for user account pages, which are relatively static in nature but shouldn't have public servers caching the request due to personalized or sensitive content.

• public: Public servers like Oxygen, or any other CDNs, are allowed to cache the request. The same content can be reused with multiple users requesting the same page. The content shouldn't contain personalized or sensitive content.

To set public cache control on your loader data, you'll need to convert your cart to render from the client side.

• Static pages like blogs or articles can be cached longer
• You can expect cached pages to result in smaller response times compared to non-cached pages if they're served from Oxygen

• Expect delayed UI updates for personalized content. For example, if you have a cart icon that displays the number of items in cart, then expect updates to this value to be delayed during a full page load. The delay results from loading the required JavaScript bundles and making a request to get the cart data.
• UI elements that rely on the client-side cart data fetch, such as the checkout button, aren't functional until the page finishes loading, JavaScript executes, a request to the server returns with cart data, and the client re-renders.
• Performance metric time to interactive (TTI) will be longer due to the delayed cart's request.