Encode revalidateTag value fixes #61390

[OMikkel]

fixes #61390

What?

Added encodeURIComponent to encode revalidateTag value beforing appending it to the url.

Why?

If a tag contains special characters the tag wont be revalidated because the special characters arent encoded.
By encoding the tag any special characters can be used.
Check out issue #61390 for further explanation

I believe this is the reason why users report the revalidateTag as unreliable. They might be using special characters in their tags to make sure they are unique, but when deployed to vercel and the fetch cache is used revalidateTag fail to revalidate them.

How?

By encoding revalidateTag with encodeURIcomponent the tag can contain special characters.

Closes NEXT-
Fixes #61390

[ijjk]

Good catch, thanks!

[ijjk]

Stats from current PR

Default Build

General Overall increase ⚠️

	vercel/next.js canary	OMikkel/next.js canary	Change
buildDuration	12.5s	12.5s	N/A
buildDurationCached	6.7s	6.1s	N/A
nodeModulesSize	200 MB	200 MB	⚠️ +310 B
nextStartRea..uration (ms)	439ms	439ms	✓

Client Bundles (main, webpack)

	vercel/next.js canary	OMikkel/next.js canary	Change
3f784ff6-HASH.js gzip	53.4 kB	53.4 kB	✓
423.HASH.js gzip	185 B	181 B	N/A
68-HASH.js gzip	29.8 kB	29.8 kB	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	238 B	239 B	N/A
main-HASH.js gzip	31.8 kB	31.8 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	✓
Overall change	100 kB	100 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	OMikkel/next.js canary	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	OMikkel/next.js canary	Change
_app-HASH.js gzip	194 B	195 B	N/A
_error-HASH.js gzip	182 B	181 B	N/A
amp-HASH.js gzip	502 B	502 B	✓
css-HASH.js gzip	320 B	322 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	255 B	256 B	N/A
head-HASH.js gzip	350 B	349 B	N/A
hooks-HASH.js gzip	368 B	369 B	N/A
image-HASH.js gzip	4.18 kB	4.18 kB	N/A
index-HASH.js gzip	257 B	256 B	N/A
link-HASH.js gzip	2.61 kB	2.61 kB	N/A
routerDirect..HASH.js gzip	310 B	311 B	N/A
script-HASH.js gzip	384 B	383 B	N/A
withRouter-HASH.js gzip	306 B	308 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	608 B	608 B	✓

Client Build Manifests

	vercel/next.js canary	OMikkel/next.js canary	Change
_buildManifest.js gzip	484 B	484 B	✓
Overall change	484 B	484 B	✓

Rendered Page Sizes

	vercel/next.js canary	OMikkel/next.js canary	Change
index.html gzip	529 B	525 B	N/A
link.html gzip	541 B	539 B	N/A
withRouter.html gzip	523 B	518 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	OMikkel/next.js canary	Change
edge-ssr.js gzip	94 kB	94.1 kB	N/A
page.js gzip	150 kB	150 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	OMikkel/next.js canary	Change
middleware-b..fest.js gzip	624 B	622 B	N/A
middleware-r..fest.js gzip	151 B	149 B	N/A
middleware.js gzip	37.6 kB	37.6 kB	N/A
edge-runtime..pack.js gzip	1.92 kB	1.92 kB	✓
Overall change	1.92 kB	1.92 kB	✓

Next Runtimes

	vercel/next.js canary	OMikkel/next.js canary	Change
app-page-exp...dev.js gzip	170 kB	170 kB	✓
app-page-exp..prod.js gzip	95.8 kB	95.8 kB	✓
app-page-tur..prod.js gzip	96.4 kB	96.4 kB	✓
app-page-tur..prod.js gzip	91 kB	91 kB	✓
app-page.run...dev.js gzip	142 kB	142 kB	✓
app-page.run..prod.js gzip	90.3 kB	90.3 kB	✓
app-route-ex...dev.js gzip	22.2 kB	22.2 kB	✓
app-route-ex..prod.js gzip	14.9 kB	14.9 kB	✓
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	✓
app-route-tu..prod.js gzip	14.5 kB	14.5 kB	✓
app-route.ru...dev.js gzip	21.7 kB	21.7 kB	✓
app-route.ru..prod.js gzip	14.5 kB	14.5 kB	✓
pages-api-tu..prod.js gzip	9.43 kB	9.43 kB	✓
pages-api.ru...dev.js gzip	9.7 kB	9.7 kB	✓
pages-api.ru..prod.js gzip	9.43 kB	9.43 kB	✓
pages-turbo...prod.js gzip	22 kB	22 kB	✓
pages.runtim...dev.js gzip	22.7 kB	22.7 kB	✓
pages.runtim..prod.js gzip	22 kB	22 kB	✓
server.runti..prod.js gzip	49.7 kB	49.7 kB	N/A
Overall change	884 kB	884 kB	✓

Diff details

Diff for page.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: d491912

[OMikkel]

No worries, happy to help. :)

Just thought about adding a .toLowerCase() on the tag value.

I have lately run into a lot of problems with tags being case sensitive and not revalidating as expected.
As the revalidateTag function is a bit confusing already I believe it would be wise to avoid confusion with tags being in different cases.

What do you think?

[ijjk]

Hmm it does seem like a gotcha if casing differences cause revalidations to not occur as expected. Will look into this and see if it's more ideal to change. Thanks for the suggestion/details!

[OMikkel]

Hmm it does seem like a gotcha if casing differences cause revalidations to not occur as expected. Will look into this and see if it's more ideal to change. Thanks for the suggestion/details!

Just had the exact issue, but it was a quick fix now that i understand revalidateTag()

[ijjk]

After further investigation, I think we want to keep the tags case-sensitive as there is some prior art for this and allows a little more flexibility. We'll make sure this is documented though!