Cloudflare caching

architecture/static-websites.mdx

@@ -101,3 +101,44 @@ CMD ["npm", "run", "dev"]
 
 ## Setup caching w/ Cloudflare
 
+<Note>
+  This feature only works with a custom domain set up in the environment your application is deployed.
+</Note>
+
+Caching in Cloudflare offers significant performance benefits such as reducing server load, enhancing scalability, and improving the user experience of your application.
+By leveraging Cloudflare's caching capabilities, you can optimize the delivery of your content and achieve faster, more reliable, and cost-effective web experiences.
+
+### Add a domain in Architect.io
+Let's say you have an account name `my-account`. Under this account, create an environment, for example `example-environment`. 
+Go to the `Settings` of `example-environment` and provide your DNS Zone.
+Click on `Register DNS Zone`. Copy the target endpoint to be used in configuration of Cloudflare DNS record.
+
+### Configure cache in Cloudflare
+To setup caching with Cloudflare, register a Cloudflare account and add your domain.
+Then, configure the DNS records for your domain by creating a CNAME using the copied target endpoint generated by Architect.io.
+To add a DNS record, click on the `Add record` button, select `CNAME` from `Type`, put in the wildcard `*` for `Name`, and the target endpoint for `IPv4 address`.
+
+Once the DNS record is added to Cloudflare, go to the `Caching` section of the Cloudflare sidebar. 
+Under `Configuration`, you can change the different settings of caching to fit your need, such as `Caching Level`, `Browser Cache TTL`, etc.
+
+You can also customize the caching behavior of specific HTTP requests by setting up Cache Rules in Cloudflare. 
+Cache Rules allow you to define criteria and actions to determine how Cloudflare should cache and serve content from its servers.
+For example, if the domain name is `example.com` and you would like to cache all the HTTP requests, configure the `Field` to match `Hostname` with `Operator` of `contains` and `Value` of `example.com`.
+![Cache rule](/images/cache-rule.png)
+Then, give this rule a name and click on `Deploy`. 
+
+Now, deploy your application in the `example-environment`.
+
+### Verify caching in browser
+Once your application is successfully deployed with Architect, go to an endpoint of your website, for example, `<service-name>.example.com` where `<service-name>` is a service name of your application.
+Next, open `Network` of your browser. For Mac, use `Command + Option + I` and for Windows, Linux, Chrome: `Control + Shift + I`.
+Click on the endpoint that you cached and inspect the `Reponse Headers`. After a hard reload of your browser, you should see the `cf-cache-status` to be `HIT`.
+```
+cf-cache-status: HIT
+```
+This indicates that the data are retrieved from the Cloudflare cache instead of fetching it from the origin server.
+
+When you access a website that is using Cloudflare caching, the first request will usually take longer to load because it has to fetch the content from the origin server.
+Subsequent requests for the same content should be faster because Cloudflare will serve the content from its cache instead of fetching it from the origin server.
+
+[Learn more about Cloudflare Cache](https://developers.cloudflare.com/cache/)