Caching static and dynamic content: How does it work?

What is the difference between static and dynamic content?

Static content is any file that is stored in a server and is the same every time it is delivered to users. HTML files and images are examples of this kind of content. Static content is like a newspaper: once an issue of a newspaper is published, it features the same articles and photos all day for everyone who picks up a copy, no matter what new developments transpire during the day.

Dynamic content is content that changes based on factors specific to the user such as time of visit, location, and device. A dynamic webpage will not look the same for everybody, and it can change as users interact with it – like if a newspaper could rewrite itself as someone is reading it. This makes webpages more personalized and more interactive.

A modern news website is a good example of dynamic content: unlike in a newspaper, articles are updated throughout the day, and the homepage may feature different headlines based on the site visitor's location or login status. Social media pages are another example: the Facebook news feed looks totally different for each user, and users are able to interact with the content in order to change it (by liking, sharing, or commenting on posts).

Dynamic webpages are not stored as static HTML files. Instead, server-side scripts generate an HTML file in response to events, such as user interactions or user logins, and send the HTML file to the web browser. Because dynamic content is generated server-side, it is typically served from origin servers, not a cache.

For a long time, dynamic content was considered uncacheable. But new technologies allow websites to serve dynamic content from a cache, significantly cutting down on latency while keeping the user experience interactive.

How is static content cached?

The usual web caching process is for a cache to save a copy of the static file – e.g., an image, – when the content is served, so that it's closer to the user and delivered more quickly the next time. Browsers and content delivery networks (CDNs) can cache static content for a set time period and serve it to users as long as the content continues to be requested. This is possible because static content does not change over time; the same file can be delivered to users over and over.

How does dynamic content caching work?

Dynamic content is generated by scripts that change the content on a page. By running scripts in a CDN cache instead of in a distant origin server, dynamic content can be generated and delivered from a cache. Dynamic content is thus essentially "cached" and does not have to be served all the way from the origin, reducing the response time to client requests and speeding up dynamic webpages.

Cloudflare Workers, for example, are serverless JavaScript functions that run on the Cloudflare CDN. They can respond to a variety of events and inputs, including device type, time of day, user location, or data from third party APIs. Based on these parameters, dynamic content can be generated and served to client devices, or static content can be altered, cached, or purged from the cache.

Because Cloudflare Workers are JavaScript code, developers can use them to build a wide range of features or an entire application, in addition to caching dynamic content. Additionally, Cloudflare Workers can be deployed and can propagate to CDN locations around the globe in seconds.

Cloudflare Workers run in a lightweight execution environment so that the code can spin up and execute within milliseconds. They allow developers to run code without worrying about configuring a backend. Learn more about serverless computing.

What is the difference between dynamic content caching and dynamic content compression?

Another approach to speeding up dynamic webpages is to compress dynamic content generated by the origin server and deliver it as quickly and efficiently as possible. With dynamic compression, the content still comes from the origin server instead of a cache, but the HTML files generated are made significantly smaller so that they can reach the client device more quickly.

How does using Edge Side Includes (ESI) speed up dynamic webpages?

Often, a large amount of content on a dynamic webpage remains consistent for all users, and only certain elements on the page are dynamic. This means that much of the HTML code is duplicated in each dynamic copy of the page. To solve for this inefficiency, a number of companies worked together to develop Edge Side Includes (ESI), a markup language that specifies where dynamic content appears on a webpage. (ESI is in use on some CDNs, but is not yet accepted by the W3C, the organization that governs web standards.)

Content with an ESI tag is fetched from somewhere else, while the rest of the webpage's content can be cached. If only some of the webpage is generated dynamically and the rest is cached, the webpage will load much more quickly than if the whole page needed to be generated for each user. ESI can be combined with Cloudflare Workers to make the process even more efficient.