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.

Server-Side Rendering

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.

The 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 App Server

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.

Client-Side Rendering

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.

Isomorphic Code

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:

ConstructDescriptionAvailability
window.locationCurrent URL from the browserClient-side only
reqHTTP request from ExpressServer-side only
resHTTP response from ExpressServer-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.

Next Steps

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.