Next.js Discord

Discord Forum

SSR and background images

Answered
American Bobtail posted this in #help-forum
Open in Discord
American BobtailOP
Hello,

I've seen this demo link https://image-component.nextjs.gallery/background which is great!

However, the background image is not loaded and cache (SSR).

Is there a way to do it?

I am looking to cache remote background images loaded within css rule background: url('http://my_url')

Thanks in advance
Answered by American Bobtail
oh... my logo is svg.... so I should put local svg I guess.. thanks for your answers!
View full answer

10 Replies

@American Bobtail Hello, I've seen this demo link https://image-component.nextjs.gallery/background which is great! However, the background image is not loaded and cache (SSR). Is there a way to do it? I am looking to cache remote background images loaded within css rule `background: url('http://my_url')` Thanks in advance
B33fb0n3
If you are using a cdn (like the provider does for image optimization) the cdn will cache everything. So you can still provide the url, but then provide the url from your cdn to have cache (and maybe optimization)
@B33fb0n3 If you are using a cdn (like the provider does for image optimization) the cdn will cache everything. So you can still provide the url, but then provide the url from your cdn to have cache (and maybe optimization)
American BobtailOP
Thanks for your answer,

However, I have one but when I am looking into the generate static page, it does not seem to have the background image loaded yet. It only loads it on the client side
@B33fb0n3 yea, the client needs to download the image first from the cdn
American BobtailOP
and it is not possible to download that image + ssr generate it from the backend within generateStaticParams for an example?
American BobtailOP
Because it seems that my local images are correctly SSR'd like this (logo for an example is present into the static page), but not the background (which is remote)
@B33fb0n3 what do you mean?
American BobtailOP
basically, I'd love the static page to have the background image loaded already so it does not flicker for the user
B33fb0n3
It's nearly the same when having:
<Image src="/some/source" /> // will be optimized

Or if you have:
background-image: url("/some/source/") // optimized by your cdn
American BobtailOP
oh... my logo is svg.... so I should put local svg I guess.. thanks for your answers!
Answer