AWS SDK S3 / Next JS 15
Answered
Korean bullhead posted this in #help-forum
Korean bullheadOP
Hi all,
I was wondering if I can get some support with something. I'm using the AWS SDK and the ListObjectsCommand to get all objects from a bucket. And it works fine when running npm run dev however when running npm run build and npm run start it will stop getting new images.
I'm using useEffect to get the new images on every page load:
const fetchImages = async () => {
const response = await fetch("/api/listImages", { cache: "no-store" });
if (response.ok) {
const data = await response.json();
setImages(
data.images.map((img: any, index: number) => ({
id: index + 1,
...img,
}))
);
} else {
console.error("Failed to fetch images");
}
};
useEffect(() => {
fetchImages();
}, []);
And I have an API route where I am using the function to get the objects.
Can anyone shed some light on why this might be happening? I thought cache but it just seems to stop attempting to get them.
Thanks in advance!
I was wondering if I can get some support with something. I'm using the AWS SDK and the ListObjectsCommand to get all objects from a bucket. And it works fine when running npm run dev however when running npm run build and npm run start it will stop getting new images.
I'm using useEffect to get the new images on every page load:
const fetchImages = async () => {
const response = await fetch("/api/listImages", { cache: "no-store" });
if (response.ok) {
const data = await response.json();
setImages(
data.images.map((img: any, index: number) => ({
id: index + 1,
...img,
}))
);
} else {
console.error("Failed to fetch images");
}
};
useEffect(() => {
fetchImages();
}, []);
And I have an API route where I am using the function to get the objects.
Can anyone shed some light on why this might be happening? I thought cache but it just seems to stop attempting to get them.
Thanks in advance!
Answered by Anay-208
Yes, its because the page is being cached.
You can:
in api route
You can:
export const dynamic = "force-dynamic"
in api route
11 Replies
your next version
Korean bullheadOP
const fetchImages = async () => {
const response = await fetch("/api/listImages", { cache: "no-store" });
if (response.ok) {
const data = await response.json();
setImages(
data.images.map((img: any, index: number) => ({
id: index + 1,
...img,
}))
);
} else {
console.error("Failed to fetch images");
}
};
useEffect(() => {
fetchImages();
}, []);
next version is 14.2.13
Yes, its because the page is being cached.
You can:
in api route
You can:
export const dynamic = "force-dynamic"
in api route
Answer
Korean bullheadOP
Thank you. When adding it to the API route I'm seeing this error:
Cannot redeclare block-scoped variable 'dynamic'.ts(2451)
Am I adding it to the wrong place? I put it at the top of the file.
have you declared it before?
like somewhere at the bottom
Korean bullheadOP
My bad sorry I accidentally pasted it twice. This worked! Thank you so much I've been driving myself crazy with this issue!
So in the future, if I'm getting data anywhere I will have to manually tell it that it's a dynamic component?
So in the future, if I'm getting data anywhere I will have to manually tell it that it's a dynamic component?
If you want it to run on every request then yes,
I recommend you to read the next docs about caching
Korean bullheadOP
Okay I'll do that. Thank you, I appreciate your help.