# Managing the cache configuration for an app Managing cache configuration Amplify uses Amazon CloudFront to manage the caching configuration for your hosted applications. A cache configuration is applied to each app to optimize for the best performance. On August 13, 2024, Amplify released improvements to caching efficiency for applications. For more information, see [CDN Caching Improvements for Better App Performance with AWS Amplify Hosting](https://aws.amazon.com/blogs/mobile/cdn-caching-improvements-for-better-app-performance-with-aws-amplify-hosting/). The following table summarizes Amplify support for specific caching behaviors before and after the caching improvements release. | Caching behavior | Previous support | With caching improvements | | --- | --- | --- | | You can add custom headers for an app in the Amplify console or in a `customHeaders.yaml` file. One of the headers that you can override is `Cache-Control`. For more information, see [Setting custom headers for an Amplify app](custom-headers.md). | Yes | Yes | | Amplify respects the `Cache-Control` headers that you define in a `customHeaders.yaml` file and they take precedence over Amplify's default cache settings. | Yes | Yes | | Amplify respects the `Cache-Control` headers set within an application’s framework for dynamic routes (for example, Next.js SSR routes). If a `Cache-Control` header is set in the app's `customHeaders.yaml` file, this takes precedence over settings in the `next.config.js` file. | Yes | Yes | | Each new CI/CD app deployment clears the cache. | Yes | Yes | | You can turn on performance mode for an app. | Yes | NoThe performance mode setting is no longer available in the Amplify console. However, you can create a `Cache-Control` header that sets the `s-maxage` directive. For instructions, see [Using the Cache-Control header to increase app performance](Using-headers-to-control-cache-duration.md). | The following table lists the changes to the default values for specific cache settings. | Cache setting | Previous default value | Default value with caching improvements | | --- | --- | --- | | Cache duration for static assets | Two seconds | One year | | Cache duration for reverse proxy responses | Two seconds | Zero seconds (no caching) | | Max Time to Live (TTL) | Ten minutes | One year | For more information about how Amplify determines the caching configuration to apply to an application and instructions on managing cache key configuration, see the following topics. **Topics** + [ # How Amplify applies cache configuration to an app ](cache-configuration-type.md) + [ # Managing cache key cookies ](cache-key-cookies.md) + [ # Using the Cache-Control header to increase app performance ](Using-headers-to-control-cache-duration.md) # How Amplify applies cache configuration to an app How Amplify applies cache configuration To manage caching for your app, Amplify determines the type of content that is being served by examining the app's platform type and rewrite rules. For `Compute` apps, Amplify also examines the routing rules in the deployment manifest. **Note** The app's platform type is set by Amplify Hosting during deployment. An SSG (static) app is set to the platform type `WEB`. An SSR app (Next.js 12 or later) is set to the platform type `WEB_COMPUTE`. Amplify identifies the following four types of content and applies the specified managed cache policy. **Static** The content served from apps with the `WEB` platform, or the static routes in a `WEB_COMPUTE` app. This content uses the Amplify-StaticContent cache policy. **Image Optimization** The images served by the `ImageOptimization` routes in a `WEB_COMPUTE` app. This content uses the Amplify-ImageOptimization cache policy. **Compute** The content served by the `Compute` routes in a `WEB_COMPUTE` app. This includes all server-side rendered (SSR) content. This content uses either the Amplify-Default or Amplify-DefaultNoCookies cache policy depending on the value of `cacheConfig.type` that is set on your Amplify `App`. **Reverse Proxy** The content served by paths that match a reverse proxy rewrite custom rule. For more information about creating this custom rule, see [Reverse proxy rewrite](redirect-rewrite-examples.md#reverse-proxy-rewrite) in the *Using redirects* chapter. This content uses either the Amplify-Default or Amplify-DefaultNoCookies cache policy depending on the value of `cacheConfig.type` that is set on your Amplify `App`. ## Understanding Amplify's managed cache policies Amplify uses the following predefined managed cache policies to optimize the default cache configuration for your hosted applications. + Amplify-Default + Amplify-DefaultNoCookies + Amplify-ImageOptimization + Amplify-StaticContent ### Amplify-Default managed cache policy settings [View this policy in the CloudFront console](https://console.aws.amazon.com/cloudfront/v4/home#/policies/cache/4d1d2f1d-3a71-49ad-9e08-7ea5d843a556) This policy is designed for use with an origin that is an [AWS Amplify](https://aws.amazon.com/amplify/) web app. This policy has the following settings: + **Minimum TTL:** 0 seconds + **Maximum TTL:** 31536000 seconds (one year) + **Default TTL:** 0 seconds + **Headers included in cache key:** + `Authorization` + `Accept` + `CloudFront-Viewer-Country` + `Host` + **Cookies included in cache key:** All cookies are included. + **Query strings included in cache key:** All query strings are included. + **Cache compressed objects setting:** Gzip and Brotli enabled. ### Amplify-DefaultNoCookies managed cache policy settings [View this policy in the CloudFront console](https://console.aws.amazon.com/cloudfront/v4/home#/policies/cache/a6bad946-36c3-4c33-aa98-362c74a7fb13) This policy is designed for use with an origin that is an [AWS Amplify](https://aws.amazon.com/amplify/) web app. This policy has the following settings: + **Minimum TTL:** 0 seconds + **Maximum TTL:** 31536000 seconds (one year) + **Default TTL:** 0 seconds + **Headers included in cache key:** + `Authorization` + `Accept` + `CloudFront-Viewer-Country` + `Host` + **Cookies included in cache key:** No cookies are included. + **Query strings included in cache key:** All query strings are included. + **Cache compressed objects setting:** Gzip and Brotli enabled. ### Amplify-ImageOptimization managed cache policy settings [View this policy in the CloudFront console](https://console.aws.amazon.com/cloudfront/v4/home#/policies/cache/1c6db51a-a33f-469a-8245-dae26771f530) This policy is designed for use with an origin that is an [AWS Amplify](https://aws.amazon.com/amplify/) web app. This policy has the following settings: + **Minimum TTL:** 0 seconds + **Maximum TTL:** 31536000 seconds (one year) + **Default TTL:** 0 seconds + **Headers included in cache key:** + `Authorization` + `Accept` + `Host` + **Cookies included in cache key:** No cookies are included. + **Query strings included in cache key:** All query strings are included. + **Cache compressed objects setting:** Gzip and Brotli enabled. ### Amplify-StaticContent managed cache policy settings [View this policy in the CloudFront console](https://console.aws.amazon.com/cloudfront/v4/home#/policies/cache/7e5fad67-ee98-4ad0-b05a-394999eefc1a) This policy is designed for use with an origin that is an [AWS Amplify](https://aws.amazon.com/amplify/) web app. This policy has the following settings: + **Minimum TTL:** 0 seconds + **Maximum TTL:** 31536000 seconds (one year) + **Default TTL:** 0 seconds + **Headers included in cache key:** + `Authorization` + `Host` + **Cookies included in cache key:** No cookies are included. + **Query strings included in cache key:** No query strings are included. + **Cache compressed objects setting:** Gzip and Brotli enabled. # Managing cache key cookies When you deploy your app to Amplify, you can choose whether you want to include or exclude cookies in the cache key. In the Amplify console, this setting is specified on the **Custom headers and cache** page using the **Cache key settings** toggle. For instructions, see [Including or excluding cookies from the cache key](#set-cache-key-cookies). **Include cookies in the cache key** With this setting, Amplify automatically chooses an optimal cache configuration for your app based on the type of content that is being served. You must explicitly choose this cache configuration type. If you are using the SDKs or the AWS CLI, this setting corresponds to setting `cacheConfig.type` to `AMPLIFY_MANAGED` with the `CreateApp` or `UpdateApp` APIs. **Exclude cookies from the cache key** This is the default cache configuration. This cache configuration is similar to the `AMPLIFY_MANAGED` configuration, except that it excludes all cookies from the cache key. Choosing to exclude cookies from the cache key can result in better cache performance. However, before you choose this cache configuration, it is important to consider whether your app uses cookies to serve dynamic content. If you are using the SDKs or the AWS CLI, this setting corresponds to setting the `cacheConfig.type` to `AMPLIFY_MANAGED_NO_COOKIES` with the `CreateApp` or `UpdateApp` APIs. For more information about the cache key, see [Understand the cache key](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/understanding-the-cache-key.html) in the *Amazon CloudFront Developer Guide;*. ## Including or excluding cookies from the cache key You can set the cache key cookie configuration for an app in the Amplify console, SDKs, or the AWS CLI. Use the following procedure to specify whether to include or exclude cookies from the cache key when you are deploying a new app using the Amplify console. **To set the cache key cookie configuration when deploying an app to Amplify** 1. Sign in to the AWS Management Console and open the [Amplify console](https://console.aws.amazon.com/amplify/). 1. On the **All apps** page, choose **Create new app**. 1. On the **Start building with Amplify** page, choose your Git repository provider, then choose **Next**. 1. On the **Add repository branch** page, do the following: 1. Select the name of the repository to connect. 1. Select the name of the repository branch to connect. 1. Choose **Next**. 1. If the app requires an IAM service role, you can either allow Amplify Hosting compute to automatically create a service role for you or you can specify a role that you have created. + To allow Amplify to automatically create a role and attach it to your app: 1. Choose **Create and use a new service role**. + To attach a service role that you previously created: 1. Choose **Use an existing service role**. 1. Select the role to use from the list. 1. Choose **Advanced settings**, then locate the **Cache key settings** section. 1. Choose either **Keep cookies in cache key** or **Remove cookies from cache key**. The following screenshot shows the **Cache key settings** toggle in the console. ![\[Screenshot of the Cache key settings toggle in the Amplify console.\]](http://docs.aws.amazon.com/amplify/latest/userguide/images/amplify-caching-1.png) 1. Choose **Next**. 1. On the **Review** page, choose **Save and deploy**. ## Changing the cache key cookie configuration for an app You can change the cache key cookie configuration for an app that is already deployed to Amplify. Use the following procedure to change whether to include or exclude cookies from the cache key for an app using the Amplify console. **To change the cache key cookie configuration for a deployed app** 1. Sign in to the AWS Management Console and open the [Amplify console](https://console.aws.amazon.com/amplify/). 1. On the **All apps** page, choose the application you want to update. 1. In the navigation pane, choose **Hosting**, then choose **Custom headers and cache**. 1. On the **Custom headers and cache** page, locate the **Cache key settings** section and choose **Edit**. 1. Choose either **Keep cookies in cache key** or **Remove cookies from cache key**. The following screenshot shows the **Cache key settings** toggle in the console. ![\[Screenshot of the Cache key settings toggle in the Amplify console.\]](http://docs.aws.amazon.com/amplify/latest/userguide/images/amplify-caching-1.png) 1. Choose **Save**. # Using the Cache-Control header to increase app performance Amplify's default hosting architecture optimizes the balance between hosting performance and deployment availability. For most customers, we recommend that you use the default architecture. If you require finer control over an app's performance, you can manually set the HTTP `Cache-Control` header to optimize for hosting performance by keeping content cached at the content delivery network (CDN) edge for a longer interval. The HTTP `Cache-Control` header's `max-age` and `s-maxage` directives affect the content caching duration for your app. The `max-age` directive tells the browser how long (in seconds) that you want content to remain in the cache before it is refreshed from the origin server. The `s-maxage` directive overrides `max-age` and lets you specify how long (in seconds) that you want content to remain at the CDN edge before it is refreshed from the origin server. Apps hosted with Amplify honor the `Cache-Control` headers that are sent by the origin, unless you override them with custom headers that you define. Amplify only applies `Cache-Control` custom headers for successful responses with a `200 OK` status code. This prevents error responses from being cached and served to other users that make the same request. You can manually adjust the `s-maxage` directive to have more control over the performance and deployment availability of your app. For example, to change the length of time that your content stays cached at the edge, you can manually set the time to live (TTL) by updating `s-maxage` to a value other than the default 31536000 seconds (one year). You can define custom headers for an app in the **Custom headers** section of the Amplify console. For an example of the YAML format, see [Setting Cache-Control custom headers](setting-custom-headers.md#example-cache-headers). Use the following procedure to set the `s-maxage` directive to keep content cached at the CDN edge for 24 hours. **To set a custom Cache-Control header** 1. Sign in to the AWS Management Console and open the [Amplify console](https://console.aws.amazon.com/amplify/). 1. Choose the app to set custom headers for. 1. In the navigation pane, choose **Hosting**, **Custom headers**. 1. On the **Custom headers** page, choose **Edit**. 1. In the **Edit custom headers** window, enter the information for your custom header as follows: 1. For `pattern`, enter **\$1\$1/\$1** for all paths. 1. For `key`, enter **Cache-Control**. 1. For `value`, enter **s-maxage=86400**. 1. Choose **Save**. 1. Redeploy the app to apply the new custom header.