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. https://github.com/vercel/next.js/blob/292cd0d377309f0cdbc6f32886637d5609ee5679/packages/next/src/server/lib/incremental-cache/fetch-cache.ts#L127

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"))