peak acorn
I'm using the Image component with images coming from a CMS. It works fine. When I build the site the image src looks like
src="/_next/image?url=<image-url-from-cms>"
my question: does the client fetch the external images on runtime or are the images fetched by Next at build-time?
winter linden
the images are fetched by the server at runtime, its not related to the client
peak acorn
is that only if it's a server-side rendered page? what if it's a SSG?
Image component and external URLs
winter linden
the same applies for ssg pages
the image optimization always happens in the server
peak acorn
gotcha.
so let's say the images are deleted from the cms after the site is deployed, this will impact the live site because the Next server won't be able to fetch the images at runtime?
winter linden
yeah
peak acorn
and there's no way to get and optimize images from an external source at build time?
winter linden
not with the default image optimization from next.js, it happens at runtime
thats why you can't use it with next export, since there is no server running to optimize the images
peak acorn
Ok…to test this out I went ahead and deleted an image from the CMS but it was still showing on the live site.
Not what I was expecting.
Then went ahead and redeployed the site and the image was gone from the site as expected.
So still confused how the Next server fetch external images at runtime if I didn’t see any impact on the site until after it was redeployed…
Maybe it just does the optimization at runtime but actual assets are fetched at build-time?
Also confirmed we’re not using next export or using any custom loader
And Next is definitely doing the optimization because images in the cms are jpeg but get served as webp
winter linden
the images are cached, if you remove them from the cms it wont immediately give you errors in the app
peak acorn
cached where? i did test in a private browser window
winter linden
there is a cache folder in the server with the optimized images
peak acorn
cool I see the cache folder. and looks like we can use it to speed up CI, which is great
https://nextjs.org/docs/advanced-features/ci-build-caching
but how does it work in that example of the image getting deleted from the CMS, I mean how long will Next use the cached image?
peak acorn
is it possible to set the Cache-Control header for all remote images to immutable, looks like that's only for local images, correct?
but minimumCacheTTL is an option for remote images?