PWA Kit Architecture: How Your PWA Kit App Delivers a Page

Ever wonder how your site goes from "loading..." to "wow!" in a flash? It's all thanks to some clever tech working behind the scenes. Check out this overview of the PWA Kit architecture and how a page renders on the server and the client.

With server-side rendering, users immediately see meaningful content instead of a blank screen and a large JavaScript file the page has to figure out. Your Largest Contentful Paint (LCP) receives a significant boost. Imagine unwrapping a perfectly assembled gift instead of a box of LEGOs. That's what Server-Side Rendering (SSR) does for your site's first impression!

This section mentions performance metrics that are part of Web Core Vitals. To learn more about these metrics, see What Are Core Web Vitals?.

Here's the quick rundown.

  1. A user requests a page.
  2. The request is sent to Salesforce Managed Runtime (MRT).
  3. On that app server, your React components transform into a complete, ready-to-view HTML page, grabbing all the necessary data from the B2C Commerce APIs.
  4. The assembled page then goes straight to the user's browser!

The Managed Runtime boosts page loading times. It includes an integrated Content Delivery Network (CDN) capable of caching the server-generated pages. If another user requests an identical page, the CDN can deliver the cached version instantaneously, completely bypassing the server. A cached HTML response represents the swiftest possible delivery, contributing to outstanding LCP and Time to First Byte (TTFB) scores!

Once the initial visual appears, hydration begins. Your site's client-side code loads and executes, transforming the static display into a vibrant, responsive experience by attaching all the event listeners and managing its internal state. From this point forward, your digital storefront operates as a Single-Page Application (SPA). All subsequent navigation and user interface changes are handled by client-side rendering (CSR). When a visitor selects a link, JavaScript takes command, retrieves fresh data, and updates only the necessary portions of the page, all without a complete page reload.

CSR delivers a seamless, application-like feel, yet it's also where you frequently encounter performance bottlenecks that negatively affect your Interaction to Next Paint (INP) score.

It's entirely possible to achieve an excellent LCP score on the server and still provide a poor user experience due to high INP and TBT on the client due to cumbersome client-side programming. PWA Kit projects are powerful React apps, and they can become JavaScript-intensive if not managed carefully. Even foundational libraries can add to the complexity of this endeavor. Therefore, you must balance performance on both sides to achieve a highly performant site.

  • Optimize LCP performance on the server through efficient content generation and aggressive data caching.
  • Optimize INP and TBT performance on the client to deal with large and inefficient JavaScript code.

Every PWA Kit developer likely encounters these prevalent performance obstacles. Here's a list of the most frequent culprits.

Frustrated user staring at a slow ecommerce site loading

  • Large JavaScript payloads: The Retail React App template is a solid foundation, but if not carefully managed, your JavaScript bundles can swell significantly. Each new capability adds bulk, slowing down the time it takes for your page to become interactive and negatively impacting INP.
  • Inefficient data retrieval: Regardless of whether you're employing older data fetching methods or the contemporary withReactQuery, pitfalls can occur. Obtaining information one piece at a time instead of in parallel, requesting far more data than is required, or refetching data on the client device that the server has already provided are all typical ways to hamper both TTFB and LCP.
  • Unruly third-party scripts: These pose a major challenge. Code snippets for analytics, advertising, A/B testing, and customer support chats can create performance issues. They often occupy the main processing thread, diminishing your INP scores, and can even interfere with your service worker's caching mechanisms.
  • Suboptimally constructed custom components: A single custom React component that isn't performance-tuned can considerably affect your INP. This generally happens through demanding computations on every render or by initiating a cascade of redundant rerenders in its subordinate elements.
  • Flawed caching implementations: The Managed Runtime's CDN is potent, but it must be configured properly. Configure your cache control headers correctly, filter out unnecessary URL parameters, and set up your API proxies correctly. Incorrect configurations result in a poor cache hit rate and cancel all the benefits of swift server-side rendering. See Maximize Your Cache Hit Ratio.