Cache

CloudFlare

A CloudFlare cache layer exists above the WordPress REST API in order to reduce server load and significantly speed up respone times.

1. A user begins loading the website

A request is made to the Netlify server for the React application bundle. This is a relatively small request.

2. Netlify responds with the React application

The application mounts, and then proceeds to make requests to the WordPress REST API to populate itself with data. Although the JSON responses are not overly large, the Wordpress processing and database queries can be a burden on response times. Regularly these requests may take up to a few seconds to return data.

3. CloudFlare intercepts traffic

WordPress REST API requests are routed through CloudFlare. If CloudFlare has seen the same request before it serves the request almost instantly from memory, bypassing the WordPress server. Otherwise, it passes the request through to WordPress. Every 30 minutes CloudFlare’s cache is automatically cleared to allow new property data to flow onto the website.

4. The data is supplied to React

The data is returned to the application, and content now displays.

Clearing the cache

Automatic

The cache will automatically expire every 30 minutes according to the settings in CloudFlare. This interval can be changed, however longer expiration times will lead to longer delays in publishing properties onto the website.

Manually

Manually clearing may be required if Wordpress content, such as a property needs to be updated immediately. This should be avoided as it will greatly increase load times for the website. The cache can be manually cleared either in the CloudFlare dashboard, or within WordPress under Settings > CloudFlare > Purge cache > Purge everything. The cache may take 30 seconds to clear.