fix: pass query params to OG image ISR function on Vercel

[Adebesin-Cell]

Summary

• Adds passQuery: true to the /__og-image__/** ISR route rule
• Vercel's ISR passQuery defaults to false, which strips all query parameters before passing the request to the serverless function
• This caused the compare page OG image to always render the empty state because the function never received packages=zustand,redux or the _query parameter that nuxt-og-image relies on

Root cause

Vercel's prerender config has a passQuery option that defaults to false. Without it, the ISR function receives the request with query params stripped — so the OG image handler always fetched /compare (no packages) instead of /compare?packages=zustand,redux.

Test plan

• Deploy preview and verify OG image at /compare?packages=zustand,redux
• Check /__og-image__/image/compare/og.html?packages=zustand,redux&_query=%7B%22packages%22:%22zustand,redux%22%7D shows package names
• Verify other OG images (package pages, homepage) still work

Closes #2431

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Apr 9, 2026 7:47pm
npmx.dev	Ready	Preview, Comment	Apr 9, 2026 7:47pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Apr 9, 2026 7:47pm

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8b5cc287-8c11-456f-ba19-e6136d0c6e4c

📥 Commits

Reviewing files that changed from the base of the PR and between 795810a and 7527c51.

📒 Files selected for processing (1)

• app/pages/compare.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• app/pages/compare.vue

---

📝 Walkthrough

Walkthrough

Added a new routeRules entry for /__og-image__/image/compare/** in nuxt.config.ts enabling ISR with expiration: 3600, passQuery: true, and restricting allowed query parameters to ['packages', '_query']. The existing broader /__og-image__/** rule remains unchanged and continues to use getISRConfig(3600). In the Compare OG image component (app/pages/compare.vue), the packages callback now returns a sorted copy via packages.value.toSorted((a, b) => a.localeCompare(b)), altering package ordering for OG generation. No exported/public API signatures were changed.

Possibly related PRs

• PR #2277: Introduced the Compare OG image component and the query-based packages prop handling this change relies on.
• PR #2298: Modified nuxt.config routeRules for OG image endpoints and ISR settings closely related to the newly added compare-specific rule.
• PR #962: Earlier changes to /__og-image__/** routeRules that affect OG image caching and ISR behaviour which interact with these route rules.

Suggested reviewers

• alexdln
• graphieros
• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly relates to the changeset. It explains why query params need to be passed to the OG image ISR function and documents the root cause, solution, and test plan.
Linked Issues check	✅ Passed	The pull request addresses the primary objective from #2431 by adding passQuery: true to enable query parameters to reach the OG image function, and implements package sorting to prevent cache-key explosion as suggested.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the OG image issue: the nuxt.config.ts modification enables query forwarding, and the compare.vue change implements the recommended package sorting to avoid cache problems.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

nuxt.config.ts (1)

132-135: Add query parameter whitelist to explicitly constrain OG image cache variation

passQuery: true correctly makes query parameters available to the OG image handler. However, to ensure robust caching behaviour and prevent unintended cache fragmentation, explicitly specify which query parameters should affect the cache key using allowQuery. By default, query parameters are ignored for cache keying unless listed in allowQuery, so adding this constraint makes the caching intent clear and ensures only the parameters the handler actually needs will vary the cache.

Suggested hardening

     '/__og-image__/**': {
       isr: {
         expiration: 3600,
         passQuery: true,
+        allowQuery: ['packages', '_query'],
       },
     },

Verify which query parameters the OG image handler requires and update the allowQuery list accordingly.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 75e4234e-1b2b-4471-b88e-8e6e9a91ef32

📥 Commits

Reviewing files that changed from the base of the PR and between 57687cc and 8a53564.

📒 Files selected for processing (1)

• nuxt.config.ts

[alexdln]

Overall, it's a standard solution. The only thing I doubt is that there can be any number of these parameters and we could exceed the limits (incl. with different params order). On the other hand, we also have an infinite number of packages and it's fine there.

I think we can try it and if anything happens we'll roll it back and make a universal image

p.s. can we add sorting here so that at least we don't store different images with the same content depending on the order?

[Adebesin-Cell]

Overall, it's a standard solution. The only thing I doubt is that there can be any number of these parameters and we could exceed the limits (incl. with different params order). On the other hand, we also have an infinite number of packages and it's fine there.

I think we can try it and if anything happens we'll roll it back and make a universal image

p.s. can we add sorting here so that at least we don't store different images with the same content depending on the order?

Good point!

[alexdln]

Thanks for the fix 🤍