Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Script component docs #25471

Merged
merged 9 commits into from
Jun 15, 2021
Merged

Script component docs #25471

merged 9 commits into from
Jun 15, 2021

Conversation

janicklas-ralph
Copy link
Contributor

Adding documentation for Script component

Documentation / Examples

  • Make sure the linting passes

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

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

- before-interactive
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

- 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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

docs/basic-features/script.md Outdated Show resolved Hide resolved
@leerob
Copy link
Member

leerob commented May 26, 2021

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?

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

@ijjk

This comment has been minimized.

docs/basic-features/script.md Outdated Show resolved Hide resolved
- 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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@ijjk
Copy link
Member

ijjk commented Jun 14, 2021

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

@timneutkens timneutkens changed the title Script component docs - WIP Script component docs Jun 15, 2021
docs/basic-features/script.md Outdated Show resolved Hide resolved
docs/basic-features/script.md Outdated Show resolved Hide resolved
docs/basic-features/script.md Outdated Show resolved Hide resolved
@ijjk ijjk merged commit 353bfaa into vercel:canary Jun 15, 2021
@janicklas-ralph janicklas-ralph deleted the script branch June 16, 2021 19:52
flybayer pushed a commit to blitz-js/next.js that referenced this pull request Jun 16, 2021
* 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>
@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants