fix(build): Invalidate MDX cache when referenced images change #15948
Conversation
Include hashes of referenced images in the MDX cache key so that pages are rebuilt when their images are updated, even if the MDX source file itself hasn't changed. Co-Authored-By: Claude Opus 4.5 <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
Improve regex to match image paths without leading dot (e.g., img/file.png) while still excluding absolute paths and URLs. Co-Authored-By: Claude Opus 4.5 <[email protected]>
BYK
left a comment
BYK
left a comment
There was a problem hiding this comment.
Not sure if this would actually work since as far as I understand, this is Vercel caching the files based on the file name. So unless we have new file names for the images we are not doing much?
Instead of computing image hashes in mdx.ts during cache key generation, embed the content hash directly in image URLs via remark-image-size. Before: /mdx-images/image.png#800x600 After: /mdx-images/image.png?v=abc12345#800x600 This ensures Vercel's CDN serves fresh images when content changes, since the URL itself changes. Also simplifies mdx.ts by removing the redundant getImageHashesFromSource function. Co-Authored-By: Claude Opus 4.5 <[email protected]>
sergical
force-pushed
the
fix/invalidate-cache-on-image-change
branch
from
dfd73b9 to
80343fc
Compare
src/remark-image-size.js
Outdated
| * The size is consumed by docImage.tsx and passed down to next/image. | ||
| * The content hash (?v=xxx) busts Vercel's CDN cache when images are updated. | ||
| */ | ||
| export default function remarkImageSize(options) { |
There was a problem hiding this comment.
It looks like this function now does more than just handle image size. Would it make sense to update its name to better reflect its current responsibilities?
There was a problem hiding this comment.
good point, thanks for flagging!
src/remark-image-size.js
Outdated
| * Appends image size and content hash to the URL. | ||
| * e.g. /img.png -> /img.png?v=abc12345#100x100 | ||
| * | ||
| * The size is consumed by docImage.tsx and passed down to next/image. |
There was a problem hiding this comment.
Nit: why are we doing this? (That was my initial question) Would it be worth mentioning that this is done to avoid any extra image measurement?
There was a problem hiding this comment.
The version hash will help bust the vercel cache so that new images with the same name don't end up being cached. this also updates the html that we use for content hashing and checking whether changes were made to a file or not to update that cache.
why are we doing the image size? that was there before. The idea is when we render it in the lightbox container, next/image requires a width and a height prop to render the image properly, this puts it in the url of the image for the component to grab it
Address PR review feedback: - Rename file to better reflect its dual responsibility (sizing + cache busting) - Update function name and improve documentation - Add comment explaining single file read for efficiency Co-Authored-By: Claude Opus 4.5 <[email protected]>
| const contentHash = createHash('md5').update(imageBuffer).digest('hex').slice(0, 8); | ||
|
|
||
| // Add content hash as query param (for CDN cache busting) and size as hash | ||
| node.url = node.url + `?v=${contentHash}#${imageSize.width}x${imageSize.height}`; |
There was a problem hiding this comment.
URL with existing query params produces malformed URL
Low Severity
The URL construction unconditionally appends ?v=${contentHash} without checking if the URL already contains query parameters. If an image URL has existing query params (e.g., ./img.png?param=1), the result would be ./img.png?param=1?v=abc#WxH with two ? characters, producing a malformed URL. The previous remarkImageSize plugin only appended #WxH, which correctly followed any existing query string. This regression means the cache-busting query param wouldn't be parsed correctly when pre-existing query params are present.
Summary
Problem
When images are updated but their referencing MDX files aren't changed, Vercel serves stale images because the MDX cache key only depends on the MDX source content hash.
Discussed in #docs-dev Slack thread.
Test plan
🤖 Generated with Claude Code