revalidateTag not working on vercel if it contains special characters

[OMikkel]

Link to the code that reproduces this issue

https://github.com/OMikkel/nextjs-fetch-cache-tag-revalidation-issue-replication

To Reproduce

1. Deploy repo to vercel (important)
2. Visit your deployment url (https://nextjs-fetch-cache-tag-revalidation-issue-replication.vercel.app/)
3. Click Reload Page button and see the Current time update
4. Click Revalidate with tag and then reload page - Notice the Cached time from API does not update
5. Click Revalidate with encoded tag - Notice the page reloads and the Cached time from API is now updated

Current vs. Expected behavior

Current

If a tag contains special characters that is not safe in a url. The cache with the tag wont be revalidated.
This is due to revalidateTag not encoding the tag before appending it to the cache invalidation url.

next.js/packages/next/src/server/lib/incremental-cache/fetch-cache.ts

Line 127 in 292cd0d

`${this.cacheEndpoint}/v1/suspense-cache/revalidate?tags=${tag}`,

If i manually encode the tag like this revalidateTag(encodeURIComponent(<tag>)) it now works every single time 😃

Expected behavior

The tag should revalidate when revalidateTag(<tag>) is called no matter what characters the string contains

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 18.18.2
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router, Data fetching (gS(S)P, getInitialProps)

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

I went through all the releases to find the version where revalidateTag was introduced.
It appears it was introduced in version v13.3.1-canary.17 and it appears to have the same issue back then. The tags are not encoded before being appended to the cache invalidation url.
https://github.com/vercel/next.js/blob/v13.3.1-canary.17/packages/next/src/server/lib/incremental-cache/fetch-cache.ts

I am also using this workaround to use the data cache during vercel build.
https://github.com/evankirkiles/nextjs-broken-data-cache-demo
Issue: vercel/next.js#56370

PR to fix this issue

This pr should fix the issues. #61392
It works in my ecommerce application if i encode tags.

Video of the issue

Temporary fix

revalidateTag(encodeURIComponent("tag"))

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.