Rendering
The PWA Kit architecture builds on React’s rendering system, adding features that benefit both users and developers. This architecture guide takes a closer look at these features of PWA Kit’s rendering system and how they work. Special attention is given to the parts of the PWA Kit React SDK and the Retail React App that come together to power each feature.
To create a favorable first impression, the first page that a user requests from your storefront must be loaded as fast as possible. But first page requests demand more rendering time than subsequent page requests. Every component on the page must be rendered, not just the ones that need updating. For the critical first page load, we use server-side rendering because it offers a powerful tool for optimizing performance: caching.
Managed Runtime’s CDN cache can store a previously rendered version of a page and serve it to the user in an instant. There’s no faster render than one that’s already done!
To learn how to boost performance through caching, see our guide to Maximizing Your Cache Hit Ratio.
The main code for server-side rendering is run inside the app server. The app server is an Express app that handles incoming HTTP requests and calls a function called render in response. The app server is defined in app/ssr.js.
The render function is imported from the PWA Kit React SDK. Helper functions (also from the SDK) create an instance of Express and attach the render function to it as an Express route method for all GET requests.
After the first page load, rendering duties are transferred from the server side to the client side through a process called hydration. During hydration, your React app starts running in the user’s browser. Event handlers spring into action to respond to user input. Page elements are rendered as needed and as directed by the user input in client-side rendering. This more efficient and user directed rendering enables the fluid experience that React is famous for.
The PWA Kit architecture works behind the scenes to make the transition from server-side rendering to client-side rendering as smooth as possible. For example, all your components are preloaded with all the props they need, even props that were the result of API requests. During server-side rendering, these props are serialized and embedded into the page source so that they can be used during hydration.
Because the same code is rendered in both server-side and client-side environments, it must be isomorphic. Isomorphic JavaScript (also known as universal JavaScript) is code that doesn’t rely on direct access to any code construct that is only available in one runtime environment or another. When a construct isn’t available in both environments, you must add conditional code around it to make sure that it’s available in the current environment.
The following table lists some commonly used constructs that must be used with conditional code:
| Construct | Description | Availability |
|---|---|---|
window.location | Current URL from the browser | Client-side only |
req | HTTP request from Express | Server-side only |
res | HTTP response from Express | Server-side only |
To determine whether rendering is happening on the client side or the server side, check for the presence of the window object. The following example uses this technique to render a price only on the client side:
Some content, such as personalized or frequently changing content, must only be rendered on the client side to get the best possible performance. See our guide to Maximizing Your Cache Hit Ratio for more information.
The PWA Kit rendering system provides a correlation ID (in UUID v4 format) on each page. The correlation ID can be used to match requests and responses from PWA Kit to activity in other systems, such as the B2C Commerce API.
On the server side, the correlation ID is set to the value of requestId in the Managed Runtime infrastructure’s API gateway. On the client side, a UUID is generated with each page navigation using the randomUUID() method of the built-in Web Crypto API.
To get the correlation ID in your PWA Kit application import the useCorrelationId hook:
You can forward the correlation ID from PWA Kit to the B2C Commerce API via the correlation-x header. In the response, the forwarded correlation ID is returned in the x-correlation-id header, combined with an internal ID from the API.
To learn more about using correlation ID with the B2C Commerce API, see About the B2C Commerce API.
Get a deeper understanding of rendering by reviewing the source code in app/ssr.js. It contains important app server settings, such as the default cache lifetime for pages.
As you read through the PWA Kit documentation, don’t miss the architecture guide for The Retail React App.