How to Implement Cache-Busted URLs in AWS and GCP

Cache-busting is a technique used in web development to ensure that the latest version of a web page is delivered to the user's browser. When a user visits a website, their browser caches some of the resources, like images, CSS files, and JavaScript files, to improve page load times. But this can cause issues when a new version of the resource is released, as the browser may continue to use the cached version. To solve this problem, cache-busting URLs are used to force the browser to fetch the latest version of the resource.

What are Cache-Busted URLs?

Cache-busted URLs are URLs that include a unique identifier, typically a version number or a hash of the resource's content, appended to the end of the URL. By changing the identifier every time a new version of the resource is released, the browser is forced to fetch the latest version of the resource, rather than using the cached version.

Why are Cache-Busted URLs Required?

Cache-busted URLs are required to ensure that users are always served the latest version of a web page. Without cache-busting, users may see an outdated version of a web page, which could result in broken functionality or poor user experience.

How to Build Cache-Busted URLs in AWS and GCP

Building cache-busted URLs in AWS and GCP is relatively straightforward. Both platforms provide options for adding version numbers or hashes to the URLs of your resources.

In AWS, you can use CloudFront, which is a content delivery network that integrates with Amazon S3, to add version numbers or hashes to your resource URLs. By default, CloudFront will use the origin URL as the cache key, which means that if the resource's URL changes, CloudFront will automatically invalidate the cache and fetch the latest version of the resource.

• Create an S3 bucket to store your resources.
• Upload your resources to the bucket.
• Create a CloudFront distribution for your bucket.
• Use a version number or hash in the resource URLs.

Here is an example of how to use a version number in a resource URL:

<img src="https://yourbucket.cloudfront.net/images/image.jpg?v=1.0">

Here is an example of how to use a hash in a resource URL:

<img src="https://yourbucket.cloudfront.net/images/image.jpg?v=9b82d12c">

In GCP, you can use the Google Cloud Storage (GCS) bucket versioning feature to add version numbers to your resource URLs. With versioning enabled, each object in the bucket will have a unique version ID, which can be appended to the end of the URL to create a cache-busted URL. GCP also provides options for using hashes in your URLs, such as the Content-Based Hashing feature in Cloud CDN.

• Create a Cloud Storage bucket to store your resources.
• Upload your resources to the bucket.
• Enable versioning for the bucket.
• Use a version number in the resource URLs.

Here is an example of how to use a version number in a resource URL:

<img src="https://storage.googleapis.com/yourbucket/images/image.jpg?version=1">

Here is an example of how to use a hash in a resource URL using Content-Based Hashing:

<img src="https://yourcdn.example.com/images/image.jpg?h=9b82d12c">

Building Cache-Busted URLs in AWS using Lambda Edge function

Here is an example of a Lambda@Edge function that appends a hash to the resource URLs:

const crypto = require('crypto');

exports.handler = (event, context, callback) => {
    const request = event.Records[0].cf.request;
    const hash = crypto.createHash('md5').update(request.uri).digest('hex');
    request.uri += `?h=${hash}`;
    callback(null, request);
};

To connect the Lambda@Edge function with the CloudFront distribution:

1. Open the AWS Management Console and navigate to the Lambda service.
2. Create a new function and copy-paste the code for the Lambda@Edge function.
3. Add environment variables or modify the code directly for setting the version or hash value.
4. Select the "Lambda@Edge" option under "Designer" in the function configuration and click "Add Trigger".
5. Configure the CloudFront distribution as the trigger for the function and select the "Origin Request" option.
6. Save the configuration and wait for the changes to propagate.

Once the changes have propagated, CloudFront will start appending the version number or hash to the resource URLs, and the Lambda@Edge function will ensure that the correct version or hash is used for each request. This will enable cache-busted URLs and ensure that users always see the latest version of your resources.

Conclusion

Cache-busted URLs are an essential technique for ensuring that users always see the latest version of a web page. By adding unique identifiers to the URLs of your resources, you can force the browser to fetch the latest version of the resource, rather than using the cached version. In AWS and GCP, you can easily build cache-busted URLs using features like CloudFront and GCS bucket versioning.