# 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.

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!

:::tip
To learn how to boost performance through caching, see our guide to [Maximizing Your Cache Hit Ratio](/docs/commerce/b2c-commerce/guide/maximizing-your-cache-hit-ratio.md).
:::

### App Server

The main code for server-side rendering is run inside the app server. The app server is an [Express](https://expressjs.com/) 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](https://expressjs.com/en/guide/routing.html) 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](https://en.wikipedia.org/wiki/Hydration_\(web_development\)). 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](https://medium.com/airbnb-engineering/isomorphic-javascript-the-future-of-web-apps-10882b7a2ebc). 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:

```javascript
<div>
  {/* The price is only rendered on the client side,
   * because it changes frequently */}
  {typeof window != 'undefined' && <p>Price: ${price}</p>}
</div>
```

:::note
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](/docs/commerce/b2c-commerce/guide/maximizing-your-cache-hit-ratio.md) for more information.
:::

## Correlation ID

The PWA Kit rendering system provides a correlation ID (in [UUID v4 format](https://en.wikipedia.org/wiki/Universally_unique_identifier#Version\_4\_\(random\))) 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:

```javascript
import {useCorrelationId} from 'pwa-kit-react-sdk/ssr/universal/hooks'

const AppConfig = ({children}) => {
  const {correlationId} = useCorrelationId()
  return <div>{children}</div>
}
```

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 [Investigate by Correlation ID](https://developer.salesforce.com/docs/commerce/commerce-api/guide/scapi-logs-request-tracking.md#investigate-by-correlation-id).

## 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](/docs/commerce/b2c-commerce/guide/retail-react-app.md).