Next.js Discord

Discord Forum

AWS SDK S3 / Next JS 15

Answered
Korean bullhead posted this in #help-forum
Open in Discord
Avatar
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!
Image
Answered by Anay-208
Yes, its because the page is being cached.

You can:
export const dynamic = "force-dynamic"

in api route
View full answer

11 Replies

Avatar
your next version
Avatar
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
Avatar
Yes, its because the page is being cached.

You can:
export const dynamic = "force-dynamic"

in api route
Answer
Avatar
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.
Avatar
have you declared it before?
like somewhere at the bottom
Avatar
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?
Avatar
If you want it to run on every request then yes,
I recommend you to read the next docs about caching
Avatar
Korean bullheadOP
Okay I'll do that. Thank you, I appreciate your help.