In my project, I want to display a gallery of images. They are all passed through either the next/image or next/future/image component (both of which have this problem), and are optimizing on load - as expected.
The issue is that they repeatedly optimize when I refresh, continually causing cold-start behaviors.
The image URL is passed into the component from getStaticProps, should it should remain the same. The data is fetched from a CMS.
Here is an excerpt of the code (using next/future/image):
<Image
src={image.data.attributes.url}
width={width}
height={height}
alt={alt || ""}
className={className} // Not used with `next/image`
{...(priority && { priority })}
/>
Of course, I've tried with the standard next/image component multiple times, removing the className, adding the layout props, etc. Same behavior.
I see image files being cached in ./next/cache/images/<imageUUID>/, so the files persist. When in a docker container, I make sure to attach a volume to it. Either way, it happens in and outside of a docker container.
When reloading the page using ctr+shift+r, going between the pages, and switching browsers/devices, the CPU usage jumps every couple of reloads as the site loads slower - with the images trying to load in:
I've seen it go as high as 2600% on my local machine, which would effectively lock my EC2 instance.
I'd expect the CPU usage to be high when I first visit the page after starting a fresh app build, but this repeatedly happens as I visit the site. On my machine, the speed is bearable. But when deployed to an AWS EC2 instance, it makes it unusable.
Here is my NextJS config:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
domains: ["picsum.photos", "<mys3>.s3.us-west-1.amazonaws.com"],
},
i18n: {
locales: ["en"],
defaultLocale: "en",
},
experimental: { images: { allowFutureImage: true } },
};
module.exports = nextConfig;
And my dependencies:
"dependencies": {
"@apollo/client": "^3.6.9",
"classnames": "^2.3.1",
"graphql": "^16.5.0",
"next": "^12.2.2",
"next-themes": "^0.2.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.4.0",
"react-spinners": "^0.13.3",
"sharp": "^0.30.7"
},
Without sharp, my RAM usage increases so much, and most of it even persists after image optimization, crashing my app via SIGKIL because of memory limits in EC2. I thought it was a memory leak on my end, so I inspected it with Node inspector. Could only see the built-in squoosh package from NextJS taking up the memory. Switching to sharp has since fixed that issue. I'm utterly at a loss as to why these issues would occur in the first place.