Script component docs #25471

janicklas-ralph · 2021-05-25T21:01:00Z

Adding documentation for Script component

Documentation / Examples

Make sure the linting passes

docs/basic-features/script.md

leerob · 2021-05-26T13:58:05Z

docs/basic-features/script.md

+
+Three loading strategies will be initially supported for wrapping 3Ps:
+
+- before-interactive


It's not clear how I use these options - is there a prop you pass to the component?

leerob · 2021-05-26T13:58:26Z

docs/basic-features/script.md

+  - script is injected in SSR’s HTML - similar to self-bundled JS
+- after-interactive (**default**)
+  - script is fetched and executed _after_ page is interactive (i.e. after self-bundled javascript is executed)
+  - script is injected during hydration and will execute soon after hydration


I wonder if we need to explain / link to hydration.

Do we explain how hydration happens in NextJS or just what hydration means in react?

We don't anywhere currently, as far as I know

docs/basic-features/script.md

leerob · 2021-05-26T14:02:04Z

Maybe a sentence or two about why this matters. If I don't use this, what happens? How does it affect my core web vitals?

docs/basic-features/script.md

leerob · 2021-06-09T22:23:44Z

docs/basic-features/script.md

+  - script is injected in SSR’s HTML - similar to self-bundled JS
+- after-interactive (**default**)
+  - script is fetched and executed _after_ page is interactive (i.e. after self-bundled javascript is executed)
+  - script is injected during hydration and will execute soon after hydration


We don't anywhere currently, as far as I know

ijjk · 2021-06-14T20:18:42Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General

	vercel/next.js canary	janicklas-ralph/next.js script	Change
buildDuration	12.9s	12.9s	⚠️ +6ms
buildDurationCached	3.1s	3.1s	-52ms
nodeModulesSize	46.4 MB	46.4 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	janicklas-ralph/next.js script	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.313	2.266	-0.05
/ avg req/sec	1080.99	1103.39	+22.4
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.271	1.267	0
/error-in-render avg req/sec	1966.33	1973.1	+6.77

Client Bundles (main, webpack, commons)

	vercel/next.js canary	janicklas-ralph/next.js script	Change
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	63 kB	63 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js script	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.17 kB	3.17 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	329 B	329 B	✓
hooks-HASH.js gzip	903 B	903 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.65 kB	1.65 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.41 kB	8.41 kB	✓

Client Build Manifests

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_buildManifest.js gzip	391 B	391 B	✓
Overall change	391 B	391 B	✓

Rendered Page Sizes

	vercel/next.js canary	janicklas-ralph/next.js script	Change
index.html gzip	522 B	522 B	✓
link.html gzip	535 B	535 B	✓
withRouter.html gzip	515 B	515 B	✓
Overall change	1.57 kB	1.57 kB	✓

Serverless Mode

General

	vercel/next.js canary	janicklas-ralph/next.js script	Change
buildDuration	14.4s	14.5s	⚠️ +44ms
buildDurationCached	4.2s	4.2s	-29ms
nodeModulesSize	46.4 MB	46.4 MB	✓

Client Bundles (main, webpack, commons)

	vercel/next.js canary	janicklas-ralph/next.js script	Change
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	63 kB	63 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js script	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.17 kB	3.17 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	329 B	329 B	✓
hooks-HASH.js gzip	903 B	903 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.65 kB	1.65 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.41 kB	8.41 kB	✓

Client Build Manifests

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_buildManifest.js gzip	391 B	391 B	✓
Overall change	391 B	391 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_error.js	16.9 kB	16.9 kB	✓
404.html	1.98 kB	1.98 kB	✓
500.html	1.96 kB	1.96 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.17 kB	1.17 kB	✓
css.html	1.35 kB	1.35 kB	✓
hooks.html	1.23 kB	1.23 kB	✓
index.js	17.2 kB	17.2 kB	✓
link.js	17.5 kB	17.5 kB	✓
routerDirect.js	17.3 kB	17.3 kB	✓
withRouter.js	17.3 kB	17.3 kB	⚠️ +2 B
Overall change	105 kB	105 kB	⚠️ +2 B

Webpack 4 Mode (Decrease detected ✓)

General

	vercel/next.js canary	janicklas-ralph/next.js script	Change
buildDuration	11.4s	11.5s	⚠️ +66ms
buildDurationCached	4.7s	4.7s	-16ms
nodeModulesSize	46.4 MB	46.4 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	janicklas-ralph/next.js script	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.347	2.322	-0.02
/ avg req/sec	1065.09	1076.52	+11.43
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.286	1.298	⚠️ +0.01
/error-in-render avg req/sec	1944.55	1925.73	⚠️ -18.82

Client Bundles (main, webpack, commons)

	vercel/next.js canary	janicklas-ralph/next.js script	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	41.8 kB	41.8 kB	✓
main-HASH.js gzip	7.99 kB	7.99 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	63.9 kB	63.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	janicklas-ralph/next.js script	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_app-HASH.js gzip	1.07 kB	1.07 kB	✓
_error-HASH.js gzip	3.84 kB	3.84 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	333 B	333 B	✓
hooks-HASH.js gzip	910 B	910 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	295 B	295 B	✓
withRouter-HASH.js gzip	292 B	292 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	9.28 kB	9.28 kB	✓

Client Build Manifests

	vercel/next.js canary	janicklas-ralph/next.js script	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes

	vercel/next.js canary	janicklas-ralph/next.js script	Change
index.html gzip	568 B	568 B	✓
link.html gzip	580 B	580 B	✓
withRouter.html gzip	561 B	561 B	✓
Overall change	1.71 kB	1.71 kB	✓

Commit: 53fdcd1

docs/basic-features/script.md

* Script component docs * Update docs with examples and feedback changes * Fix typo * Add example * Update text * Apply suggestions from code review Co-authored-by: JJ Kasper <jj@jjsweb.site>

Script component docs

4311622

janicklas-ralph requested review from divmain, ijjk, leerob, lfades, shuding and timneutkens as code owners May 25, 2021 21:01

ijjk added the type: documentation label May 25, 2021

leerob reviewed May 26, 2021

View reviewed changes

housseindjirdeh reviewed Jun 3, 2021

View reviewed changes

docs/basic-features/script.md Outdated Show resolved Hide resolved

janicklas-ralph added 2 commits June 9, 2021 10:53

Merge branch 'canary' of github.com:vercel/next.js into script

24d4d26

Update docs with examples and feedback changes

b54bfff

janicklas-ralph requested review from leerob and housseindjirdeh June 9, 2021 18:17

Fix typo

45e2dd3

This comment has been minimized.

Sign in to view

Add example

2862abf

This comment has been minimized.

Sign in to view

leerob reviewed Jun 9, 2021

View reviewed changes

janicklas-ralph added 2 commits June 14, 2021 13:07

Merge branch 'canary' of github.com:vercel/next.js into script

e6db822

Update text

53fdcd1

timneutkens changed the title ~~Script component docs - WIP~~ Script component docs Jun 15, 2021

ijjk reviewed Jun 15, 2021

View reviewed changes

docs/basic-features/script.md Outdated Show resolved Hide resolved

ijjk reviewed Jun 15, 2021

View reviewed changes

docs/basic-features/script.md Outdated Show resolved Hide resolved

ijjk reviewed Jun 15, 2021

View reviewed changes

docs/basic-features/script.md Outdated Show resolved Hide resolved

ijjk added 2 commits June 15, 2021 09:14

Apply suggestions from code review

fee393f

Merge branch 'canary' into script

e4e70a5

ijjk merged commit 353bfaa into vercel:canary Jun 15, 2021

sync-by-unito bot mentioned this pull request Jun 16, 2021

chore(deps): bump next from 10.1.2 to 11.0.0 filecoin-project/slate#793

Closed

janicklas-ralph deleted the script branch June 16, 2021 19:52

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Script component docs #25471

Script component docs #25471

janicklas-ralph commented May 25, 2021

leerob May 26, 2021

leerob May 26, 2021

janicklas-ralph Jun 9, 2021

leerob Jun 9, 2021

leerob commented May 26, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

leerob Jun 9, 2021

ijjk commented Jun 14, 2021


		Three loading strategies will be initially supported for wrapping 3Ps:

		- before-interactive

Script component docs #25471

Script component docs #25471

Conversation

janicklas-ralph commented May 25, 2021

Documentation / Examples

leerob May 26, 2021

Choose a reason for hiding this comment

leerob May 26, 2021

Choose a reason for hiding this comment

janicklas-ralph Jun 9, 2021

Choose a reason for hiding this comment

leerob Jun 9, 2021

Choose a reason for hiding this comment

leerob commented May 26, 2021

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

leerob Jun 9, 2021

Choose a reason for hiding this comment

ijjk commented Jun 14, 2021

Stats from current PR