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
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
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.
The following table lists some commonly used constructs that must be used with conditional code:
|Current URL from the browser||Client-side only|
|HTTP request from Express||Server-side only|
|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.
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.