Next.js Discord

Discord Forum

SSR and background images

Answered
Devon Rex posted this in #help-forum
Open in Discord
Devon RexOP
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 Devon Rex
oh... my logo is svg.... so I should put local svg I guess.. thanks for your answers!
View full answer

10 Replies

@Devon Rex 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)
Devon RexOP
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
Devon RexOP
and it is not possible to download that image + ssr generate it from the backend within generateStaticParams for an example?
Devon RexOP
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?
Devon RexOP
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
Devon RexOP
oh... my logo is svg.... so I should put local svg I guess.. thanks for your answers!
Answer