fix: `<Script>` with `beforeInteractive` strategy ignores additional attributes in App Router #59779

zbauman3 · 2023-12-19T19:44:52Z

What?

Currently, next/script in the App Router does not behave as the docs describe in the Additional Attributes section – it does not pass on all additional attributes when strategy="beforeInteractive" (#49830).

Why?

The props from the <Script> component were not passed on to the underlying script loader (self.__next_s).

How?

I've added the missing props to the object that is pushed to self.__next_s.

NEXT-1304
Fixes #49830

zbauman3 · 2024-01-02T15:59:03Z

Hey @timneutkens, @ijjk, @shuding, @huozhi, @feedthejim, @ztanner, @wyattjoh 👋

I was wondering if I could get a review on this PR? This fixes a bug in the App Router when using <Script> with beforeInteractive. See #49830

huozhi

Hi, can you add a test for testing the additional attributes

ijjk · 2024-01-03T16:32:52Z

Allow CI Workflow Run

approve CI run for commit: e923551

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

ijjk · 2024-01-03T16:32:53Z

Allow CI Workflow Run

approve CI run for commit: e923551

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

ijjk · 2024-01-03T16:41:28Z

Stats from current PR

Default Build

General Overall increase ⚠️

	vercel/next.js canary	zbauman3/next.js patch-3	Change
buildDuration	12.9s	12.9s	N/A
buildDurationCached	7.2s	6.1s	N/A
nodeModulesSize	202 MB	202 MB	⚠️ +900 B
nextStartRea..uration (ms)	407ms	431ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	zbauman3/next.js patch-3	Change
193.HASH.js gzip	181 B	182 B	N/A
3f784ff6-HASH.js gzip	53.3 kB	53.3 kB	✓
433-HASH.js gzip	28.4 kB	28.5 kB	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	239 B	242 B	N/A
main-HASH.js gzip	31.7 kB	31.7 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	N/A
Overall change	98.5 kB	98.5 kB	✓

Legacy Client Bundles (polyfills)

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

Client Pages

	vercel/next.js canary	zbauman3/next.js patch-3	Change
_app-HASH.js gzip	194 B	195 B	N/A
_error-HASH.js gzip	183 B	181 B	N/A
amp-HASH.js gzip	504 B	502 B	N/A
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	255 B	253 B	N/A
head-HASH.js gzip	350 B	349 B	N/A
hooks-HASH.js gzip	369 B	369 B	✓
image-HASH.js gzip	4.28 kB	4.28 kB	N/A
index-HASH.js gzip	255 B	256 B	N/A
link-HASH.js gzip	2.61 kB	2.61 kB	✓
routerDirect..HASH.js gzip	312 B	311 B	N/A
script-HASH.js gzip	385 B	383 B	N/A
withRouter-HASH.js gzip	307 B	308 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.4 kB	3.4 kB	✓

Client Build Manifests

	vercel/next.js canary	zbauman3/next.js patch-3	Change
_buildManifest.js gzip	483 B	484 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	zbauman3/next.js patch-3	Change
index.html gzip	528 B	527 B	N/A
link.html gzip	541 B	540 B	N/A
withRouter.html gzip	524 B	522 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	zbauman3/next.js patch-3	Change
edge-ssr.js gzip	93.7 kB	93.8 kB	N/A
page.js gzip	147 kB	147 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	zbauman3/next.js patch-3	Change
middleware-b..fest.js gzip	625 B	624 B	N/A
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	37.4 kB	37.4 kB	N/A
edge-runtime..pack.js gzip	1.92 kB	1.92 kB	✓
Overall change	2.07 kB	2.07 kB	✓

Next Runtimes

	vercel/next.js canary	zbauman3/next.js patch-3	Change
app-page-exp...dev.js gzip	168 kB	168 kB	✓
app-page-exp..prod.js gzip	94.2 kB	94.2 kB	✓
app-page-tur..prod.js gzip	94.9 kB	94.9 kB	✓
app-page-tur..prod.js gzip	89.4 kB	89.4 kB	✓
app-page.run...dev.js gzip	138 kB	138 kB	✓
app-page.run..prod.js gzip	88.7 kB	88.7 kB	✓
app-route-ex...dev.js gzip	24.1 kB	24.1 kB	✓
app-route-ex..prod.js gzip	16.7 kB	16.7 kB	✓
app-route-tu..prod.js gzip	16.7 kB	16.7 kB	✓
app-route-tu..prod.js gzip	16.3 kB	16.3 kB	✓
app-route.ru...dev.js gzip	23.5 kB	23.5 kB	✓
app-route.ru..prod.js gzip	16.3 kB	16.3 kB	✓
pages-api-tu..prod.js gzip	9.38 kB	9.38 kB	✓
pages-api.ru...dev.js gzip	9.65 kB	9.65 kB	✓
pages-api.ru..prod.js gzip	9.37 kB	9.37 kB	✓
pages-turbo...prod.js gzip	21.9 kB	21.9 kB	✓
pages.runtim...dev.js gzip	22.5 kB	22.5 kB	✓
pages.runtim..prod.js gzip	21.9 kB	21.9 kB	✓
server.runti..prod.js gzip	49.4 kB	49.4 kB	✓
Overall change	932 kB	932 kB	✓

Diff details

Diff for main-HASH.js

Diff too large to display

Commit: e923551

huozhi

Thanks!

zbauman3 · 2024-01-03T19:49:58Z

@huozhi

No prob – thank you for the speedy response!

…attributes in App Router (vercel#59779) ### What? Currently, `next/script` in the App Router does not behave as the docs describe in the [Additional Attributes](https://nextjs.org/docs/app/building-your-application/optimizing/scripts#additional-attributes) section – it does not pass on all additional attributes when `strategy="beforeInteractive"` ([vercel#49830](vercel#49830)). ### Why? The props from the `<Script>` component were not passed on to the underlying script loader (`self.__next_s`). ### How? I've added the missing props to the object that is `push`ed to `self.__next_s`. NEXT-1304 Fixes vercel#49830

zbauman3 requested review from timneutkens, ijjk, shuding, huozhi, feedthejim, ztanner and wyattjoh as code owners December 19, 2023 19:44

ijjk added the type: next label Dec 19, 2023

zbauman3 changed the title ~~Pass on all props to next/script in app router~~ fix: <Script> with beforeInteractive strategy ignores additional attributes in App Router Dec 19, 2023

zbauman3 mentioned this pull request Dec 19, 2023

[NEXT-1304] <Script> with beforeInteractive strategy ignores additional attributes in app router #49830

Closed

1 task

huozhi reviewed Jan 3, 2024

View reviewed changes

zbauman3 added 2 commits January 3, 2024 09:42

Pass on all props to next/script in app router

6f8a439

add tests for app dir scripts

e923551

zbauman3 force-pushed the patch-3 branch from 0b9ab46 to e923551 Compare January 3, 2024 16:15

huozhi added the CI approved Approve running CI for fork label Jan 3, 2024

huozhi approved these changes Jan 3, 2024

View reviewed changes

huozhi merged commit 37a0989 into vercel:canary Jan 3, 2024
86 checks passed

samcx mentioned this pull request Jan 6, 2024

chore: update turbo to the latest #60293

Closed

github-actions bot added the locked label Jan 18, 2024

github-actions bot locked as resolved and limited conversation to collaborators Jan 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: `<Script>` with `beforeInteractive` strategy ignores additional attributes in App Router #59779

fix: `<Script>` with `beforeInteractive` strategy ignores additional attributes in App Router #59779

zbauman3 commented Dec 19, 2023 •

edited

zbauman3 commented Jan 2, 2024

huozhi left a comment

ijjk commented Jan 3, 2024 •

edited by huozhi

ijjk commented Jan 3, 2024

ijjk commented Jan 3, 2024

huozhi left a comment

zbauman3 commented Jan 3, 2024

fix: <Script> with beforeInteractive strategy ignores additional attributes in App Router #59779

fix: <Script> with beforeInteractive strategy ignores additional attributes in App Router #59779

Conversation

zbauman3 commented Dec 19, 2023 • edited

What?

Why?

How?

zbauman3 commented Jan 2, 2024

huozhi left a comment

Choose a reason for hiding this comment

ijjk commented Jan 3, 2024 • edited by huozhi

ijjk commented Jan 3, 2024

ijjk commented Jan 3, 2024

Stats from current PR

huozhi left a comment

Choose a reason for hiding this comment

zbauman3 commented Jan 3, 2024

fix: `<Script>` with `beforeInteractive` strategy ignores additional attributes in App Router #59779

fix: `<Script>` with `beforeInteractive` strategy ignores additional attributes in App Router #59779

zbauman3 commented Dec 19, 2023 •

edited

ijjk commented Jan 3, 2024 •

edited by huozhi