I am using cacheComponents for nextjs 16 on AWS Amplify (hosted directly through AWS web UI)

I have my cached component
export default async function DogListWrapper() {
'use cache'
cacheTag("animals")
cacheLife("hours")
const dogs: Animal[] = await fetchDogs()

return <AnimalList animalList={dogs}></AnimalList>
}


and my server action (use server defined at top of file):
export async function editAnimal(
animalId: number,
animal_data: Record<string, Json>
) {
const supabase = await createSupabaseServerClient()
const {
data: {user},
} = await supabase.auth.getUser()

if (!user) {
return {
status: 401,
statusText: "Not logged in as admin",
error: "Unauthorized",
}
}
//Update logic here....

updateTag("animals")
// revalidateTag('animals', 'max')
return {status: status, statusText: statusText, error: error}
}



I also have my fetch logic:
export async function fetchDogs() {
const {data, error} = await supabase
.from("animal")
.select()
.not("adoption_status", "in", '("adopted","staging")')
.eq("species", "dog")

if (error) {
console.error("Database Error:", error)
}

return data ?? []
}


I have tried this code on my local machine and it works perfectly. For example when I comment out updateTag the page is cached when I edit an animal, as in it doesnt update, but when I uncomment it and edit an animal the page is updated.

However when I push this code to Amplify and I edit an animal the page is still cached and does not update on an edit. This is leading me to beleive AWS is having the issue. I want to see if anyone knows what I am missing/why this doesnt work.

My guess is it has something to do with CloudFront