🎉 Welcome to the Mobify DevCenter, our new home for v2.0 documentation and developer resources! (For now, the site is desktop-only.) Switch to old site
close
Mobify DevCenter
DocumentationAPI & SDK ReferenceHow-To Guides
search_icon_focus

Using the CDN Cache

Note: Before you follow this guide, we recommend reading our overview of the CDN cache.

How Mobify’s CDN caching works

Mobify’s CDN caches responses to requests. The cached responses are indexed by the request URL (hostname, path and query string) plus whatever headers are configured to be forwarded to the origin. For the Express app, only headers relating to device type (mobile, desktop or tablet) and request class are forwarded, so only those headers are used to look up cached responses.

URL fragments are ignored when looking up cached responses. For example: responses to requests for the URLs www.example.com, www.example.com/path, and www.example.com/path?a=1 will all be cached separately, since the URLs are different. However, a request for www.example.com/path#123 will match www.example.com/path, since fragments are ignored.

Once the request comes in, Mobify’s CDN first checks the cache: is a matching response found? If it is, the CDN can respond right away. (Note that expired responses disappear from the cache.)

A cache hit means that the CDN checked the cache for a matching response, and was able to find a matching response right away. This results in a very fast response.

A cache miss means that no matching response was found in the cache. In this case, the CDN needs to forward the request to the origin. (The Mobify Platform sets up several different origins: the Express app, bundle files, and separate origins for any project-specific proxies that are configured.) This request flow is orders of magnitude slower than finding the resource in the CDN or Application cache.

The CDN cache is temporary, in that CDN-cached content may get evicted in favour of new, more frequently-accessed assets. There are several regional CDN caches to optimize the network response speed. In addition, the CDN Cache stores different versions of a page for mobile, tablet, and desktop. This allows us to serve different markup to these devices at the cost of having to render the page again for a different device type.

You can test if you’re getting a cache hit or miss in the HTTP response headers. Just look for the x-cache header, and you’ll either see “x-cache: Miss from cloudfront” or “x-cache: Hit from cloudfront”. To improve PWA performance, we need to increase the percentage of CDN cache hits.

Maximizing performance by using Mobify’s CDN cache

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:

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

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:

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 boost performance. Or explore our guide to Improving Client-Side Performance.