Using the CDN Cache to Maximize Performance

To render your PWA’s most frequently-visited content quickly, you’ll want to leverage Mobify’s CDN Cache. In this section, we’ll guide you through how to customize cache control response headers, and how to use the CDN’s request processor to map many URLs to a small number of matching responses. Let’s go through each technique in detail.

Setting optimal CDN cache lifetimes

The next step toward maximizing your PWA’s cache hit rate is setting cache control response headers. Cache control response headers determine the length of time that a page can be stored in the CDN cache. If you do not customize the cache control response headers, they will be set to 600 seconds by default.

The default cache control response headers should be customized depending on the type and status of the page. For example, a content page that rarely changes can be safely cached for a very long time. In contrast, a product listing page that’s frequently updated with new products might require a short cache lifetime, such as fifteen minutes. Whenever possible, choose long cache lifetimes in order to maximize the cache hit rate.

Set cache control response headers either globally through the App Component (which is located within pwa/app/pages/pwa-app/index.jsx), or by using a page by page approach. (In both approaches, you will set the value of s-maxage to a time value in seconds.)

Explore our examples outlining the two approaches below, or you can continue reading about HTTP caching.

Example: globally using App Component

The following example can be applied within your project’s pwa/app/pages/pwa-app/index.jsx file:

Copy
class App extends React.Component {
    /**
     * The app component is special - we call getProps() for
     * every rendered page on the server, making it the place to set headers
     * for every response.
     */
    static getProps({req, res}) {
        if (res) {
            // If res is defined, we’re server-side.
            res.set('cache-control', `max-age=${cacheTime}, s-maxage=${cacheTime}`)
        }
    }
    render() {
        // ...
    }
}

Example: Page by Page

Rather than setting cache control for the whole app, there is also an option to set cache control page by page

Copy
class ExamplePage extends React.Component {
    /**
     * The Page getProps method is the place to set page-specific headers.
     */
    static getProps({req, res, match}) {
        const categoryId = match.params.categoryId
        res.setHeader('X-Template-Name', 'SettingHeadersExample')
        return fetch(`/categories/${categoryId}/`)
            .then((res) => res.json())
            .then((data) => {
                if (res) {
                    // If res is defined, we’re server-side.
                    const minutes = 60
                    const hours = 60 * 60
                    const maxAge = categoryId === 'dresses' ? 5 * minutes : 12 * hours
                    res.setHeader('Cache-Control', `maxAge=${maxAge}`)
                }
                return dispatch(categoryReceived(data))
            })
    }
    render() {
        // ...
    }
}

You can test that your cache controls are present in the response headers by inspecting your network requests, using Chrome DevTools’ Network tab. Alternatively, you can use your command line interface with the following curl command, which will show all response headers. Simply replace ““ with the URL you’re interested in:

Copy
curl --dump-header - --silent --output /dev/null <enterYourSiteURLhere>

Using the CDN’s request processor to improve cache hits

Mobify’s request processor handles requests as soon as they’re received by the Mobify Platform, before the CDN looks for cached responses. You can use it to improve cache hits by modifying parts of a request, such as the query parameters, to ensure that similar URLs map to the same response. For more details, check out our how-to on filtering query strings to improve caching.

Next steps

Next, you can continue through our Server-Side Rendering Performance series, with a guide to Using the App Cache to Maximize Performance to boost performance. Or explore our guide to Improving Client-Side Performance.