I have a server component which import 4 svg
this svgs are passed into a client component as React Element
const contentOne = (
<Image
src={MVP}
alt=""
priority={true}
loading="eager"
width={130}
className="background-svg"
/>
);
like this,
the client component render the svg based on a state
useEffect(() => {
if (phaseOne && phaseTwo && phaseThree) {
if (total === 0) {
setSVG(contentFour);
} else if (total <= phaseOne && total !== 0) {
setSVG(contentOne);
} else if (total >= phaseOne && total <= phaseTwo) {
setSVG(contentTwo);
} else if (total >= phaseThree) {
setSVG(contentThree);
}
}
}, [phaseOne, phaseTwo, phaseThree, total]);

return #Unknown Channel{svg}</>

i opened the network tab and each time the total changes, the client (refetch) the svg, and its giving bad experience to use because its not immedietly loading and showing blank space first.

how can i prerender the Images (fetch them and render them in client) without the causing a refetch for the image on each update