How to Prevent Images from Re-rendering?

[ficapy]

I am using a project ChatGPT-Next-Web that uses react-markdown for rendering. I've encountered a bug where, under streaming response conditions, it fails to handle image rendering correctly. Images are being re-rendered and requested from the network hundreds of times.

I created a minimal reproduction: https://stackblitz.com/edit/vitejs-vite-3jdib8?file=src%2FApp.jsx. It adds a bit of content to the existing Markdown every second, causing the Markdown to re-render and re-request the images.

import React from 'react';
import ReactMarkdown from 'react-markdown';

let markdown1 = `![https://placehold.co/600x400](https://placehold.co/600x400)
`;

const markdown2 = `
123

`;

function App() {
  const [content, setContent] = React.useState(markdown1);

  React.useEffect(() => {
    const x = setInterval(() => {
      setContent((p) => markdown2 + p);
    }, 1000);
    return () => {
      clearInterval(x);
    };
  }, []);

  return (
    <div className="App">
      <ReactMarkdown>{content}</ReactMarkdown>
    </div>
  );
}

export default App;

I found a similar discussion here: remarkjs/react-markdown#703.

Is there an effective way to ensure that each image is only requested once?

[ChristianMurphy]

Welcome @ficapy! 👋
Sorry you ran into some confusion.

The answer is in your screenshot.
The image is being re-requested because you disabled caching in your developer console.
Forcing your browser to re-request the image every time, even though it would usually be cached and immediately rerender.
You can learn more about how to use Chrome developer network tools at https://developer.chrome.com/docs/devtools/network/reference

[remcohaszing]

Note that you’re prepending markdown, and index is used as a key. So basically, every second your code:

• Changes the <img> element in the last <p> element with the text 123
• Appends a new <p> element with a new <img> element.

[ficapy]

Hi @ChristianMurphy
Thank you for pointing out this issue. Enabling the cache resolved the problem (I usually disable caching when debugging).

With the cache enabled, everything works fine in most scenarios (it's rare to find an image link on the internet without cache headers :). So, I created a non-caching SVG using Cloudflare Workers: https://no-cache-svg.zu.workers.dev.

Do you have any suggestions for this image? I don't want it to be re-requested when the URL hasn't changed.

Since most images have cache headers, the current implementation doesn't usually result in repeated requests. I'm just wondering if there's a more robust solution that doesn't rely on cache headers.

[ChristianMurphy]

@ficapy my strong recommendation is to configure the server to send the correct cache header.

Otherwise you are trying to solve a network problem with application logic.
You can but you are creating a maintainance nightmare for yourself.

If you the route of application side caching, I'd recommend a service worker to implement it https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
Or a library like https://developer.chrome.com/docs/workbox/

If you want to go down the rendering route, start by seeing @remcohaszing's comment above.
Users probably won't see the situation you shared.
LLMs generally append rather than prepend.