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.

Benefits of turning on cache control

Anchor link to section titled "Benefits of turning on cache control"

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

Trade offs of turning on cache control

Anchor link to section titled "Trade offs of turning on cache control"

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.

Step 1: Add a loader on your cart route

Anchor link to section titled "Step 1: Add a loader on your cart route"

Create a dedicated route to get a user's cart data. The route also serves as an API. You can get a user's cart by making a fetcher request to /cart.

Step 2: Create a provider and a hook for getting the cart data

Anchor link to section titled "Step 2: Create a provider and a hook for getting the cart data"

Create the <CartProvider> and useCart hook to enable read access to a user's cart across the app:

Step 3: Include your `CartProvider` in your root

Anchor link to section titled "Step 3: Include your CartProvider in your root"

Include the CartProvider component in your root layout so that your useCart hook is available in the entire app.

Step 4: Get cart content with your `useCart` hook

Anchor link to section titled "Step 4: Get cart content with your useCart hook"

Access a user's cart data to do client-side UI rendering from anywhere in your app by using the useCart hook within the <CartProvider> component.

If you provide cart data in any Remix loaders, then make sure to remove them.