Managing Cache Misses and 'no-cache' Rules in Amazon CloudFront

As I delve into my latest Next.js project, I've encountered an issue with certain pages that have cache headers configured as 

cache-control: no-cache, max-age=120, must-revalidate
. Surprisingly, despite these settings, CloudFront seems to be consistently missing the cached content. Through my investigation, I've learned that setting 'no-cache' actually directs the CDN to validate the freshness of the content with the origin server before delivering it. This leads me to question whether my origin server is signaling that the resource is outdated and in need of updating.

cachingnext.jsamazon-cloudfront

Answer №1

no-cache and max-age=120 have conflicting purposes, especially when it comes to CloudFront.

no-cache suggests that the content should not be served from cache without revalidation. On the other hand, max-age=120 implies that the content can be cached and served for a maximum of 120 seconds before requiring revalidation.

It's important to understand that these directives serve different functions.

If your goal is to set a specific time limit for caching, it's best to remove no-cache and must-revalidate from the header and solely utilize cache-control: max-age=120.

However, if you require strict revalidation with every request, opt for 

cache-control: no-cache, must-revalidate
without specifying a max-age.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Performing optimized searches in Redis

In the process of creating a wallet app, I have incorporated redis for storing the current wallet balance of each user. Recently, I was tasked with finding a method to retrieve the total sum of all users' balances within the application. Since this in ...

javascriptnode.jstypescriptcachingredis

The CSS stylesheet is not being applied to the components in Next.js

I am currently facing an issue with styling my React/Next component. Despite trying to apply a stylesheet to enhance its appearance, the CSS doesn't seem to be taking effect. Could someone please provide guidance on how I can resolve this? I have att ...

javascriptreactjsfrontendnext.js

Access Firestore documents within the NextJS 13 framework

As a newcomer to React/NextJS, I am working on fetching a list of documents from a Firestore Collection using NextJS 13 in a SSR Page so that I can display them below. Although I have successfully retrieved the documents within my function, the challenge ...

reactjsgoogle-cloud-firestorenext.jsnext.js13

Utilize the data storage API within Next.js or directly in the user's

Struggling to store this ini file on either the server or client, any help would be greatly appreciated. Additionally, I would like to display the ini info in the browser so that clients can easily copy and paste the information. However, I seem to be fac ...

javascripthtmlnode.jsapinext.js

Enhance your Next.js application with language-based metadata using next-intl

Before rendering the page, you can define metadata utilizing next-intl. This allows you to obtain the locale from the parameters passed to the renderer function. Is there a way to set metadata based on the locale? I attempted the following: en.json: { ...

reactjsnext.jsnext.js13next-intl

The latest version of Next.js, 11.1.0, does not support monitoring for code changes within the node

In the latest version of Nextjs (11.1.0), there seems to be an issue where code changes in the `node_modules` directory are not being watched, unlike in the previous version (10.2.1). While working on a project with Nextjs 11.1.0, I have tried explicitly ...

javascriptwebpacknext.js

Encountering a "TypeError: Unable to access undefined properties" error while trying to insert data using Prisma in Next.js

I'm currently facing an issue while trying to add data to an "actualite" table using Prisma in my Next.js project. The error message I'm encountering is "TypeError: Cannot read properties of undefined (reading 'actualite')" when the API ...

next.jsprisma

Saving the object returned by the useRef hook into the Redux state

I have a question. I am developing a music platform similar to Spotify using Next.js. To manage states, I am utilizing Redux Toolkit. In order to play music, I have integrated the audio element within a component that includes controls to adjust the music ...

javascriptreactjsreduxnext.js

Upon commencing the project, an error arises with reactstrap when attempting to import the library

Issue with Error console in node_modules/reactstrap/lib/index.js: SyntaxError: Cannot use import statement outside a module at internalCompileFunction (node:internal/vm:73:18) at wrapSafe (node:internal/modules/cjs/loader:1176:20) ... Node.js v18. ...

reactjsnpmnext.jsyarnpkgreactstrap

``Are you experiencing trouble with form fields not being marked as dirty when submitting? This issue can be solved with React-H

Hey there, team! Our usual practice is to validate the input when a user touches it and display an error message. However, when the user clicks submit, all fields should be marked as dirty and any error messages should be visible. Unfortunately, this isn&a ...

javascriptreactjstypescriptnext.jsreact-hook-form

Encountering issues with Prisma Client initialization during deployment of Next.js project on Caprover platform

After attempting to deploy my Next.js version 12 projects onto my Caprover server, I encountered an unexpected error related to Prisma: Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again. Is there anyo ...

next.jsprismacaprover

Executing string as JavaScript code in Next.js React can be achieved by using the `eval()`

I am facing an issue where I have a string that includes JavaScript code to generate a form, and I need to run that code within a React component in Next.js The variable `formJsCode` holds the dynamic JavaScript code fetched from a database. The current i ...

reactjsnext.js

What is the best way to handle a rejected promise in Redux when using createAsyncThunk with Next.js?

I'm attempting to set up a player using a POST request but I keep encountering the error of promise rejected in redux devtool. Interestingly, the data is visible on the UI. The tools being utilized are createAsyncThunk and createEntityAdapter: creat ...

reduxreact-reduxnext.jsredux-thunkredux-toolkit

It appears that the NextJS middleware isn't getting activated

In my project, I have the middleware.js file located at /myproject/pages/middleware.js: export function middleware(request) { console.log(1) return NextResponse.redirect(new URL('/', request.url)) } // For more information on matching paths, ...

next.js

Can Stripe Elements be used to integrate CAPTCHA on a website?

Our Next.js website currently utilizes Stripe Elements for a donation form, allowing users to make simple one-off payments as guests. Below is the implementation of the 'submit' method for the form: export const makeOneOffPayment = async ( ...

reactjsnext.jsstripe-payments

Using Azure application insights with your nextjs application is a powerful way to monitor and analyze

Having trouble setting up Azure app insight with nextjs, is there anyone who can provide assistance? ...

azurenext.jsazure-application-insights

Drag and drop feature malfunctioning - items cling to one another and rearrangement is imprecise

For my current project, I am utilizing react-beautiful-dnd, Chakra UI, and Next.js. If you're interested in seeing the issue in action, check out this video: https://youtu.be/8maSmqahjfw. Despite attempting various methods like ondragupdate, ondragsta ...

reactjsnext.jsdragchakra-uireact-beautiful-dnd

How to Specify the Format of an Image or URL in Next.js

When using the Next.js image component, it automatically selects the most suitable format for images (avif, webm, etc.) based on the accepted format types of the browser. However, in my situation, I specifically need avif for most images but jpeg for certa ...

next.jsnextjs-imageimage-optimization

Is it possible to incorporate a next.js image onto the background design?

I've encountered an issue while attempting to create a fixed background image with a parallax effect using Tailwind CSS and Next.js Image. If you need to see an example of this in action, check out this Template Monster theme. Here's the code s ...

javascripthtmlcssnext.jstailwind-css

The error message states that Next JS is having trouble accessing properties related to headers due to being undefined

Utilizing the Django rest framework on the backend is my current setup. Whenever a user inputs incorrect credentials, I send a 400 status from the backend. As for the frontend, I have opted for NEXT.js. An issue arises in the signin process within the rout ...

djangonext.js