Add `useFlushEffect` hook #31223

devknoll · 2021-11-09T19:56:51Z

Implements #30997

packages/next/server/render.tsx

Simplifies `renderToWebStream` a little bit for #31223

Extracted from #31223. We need to move the root `<div id="__next">` wrapper to be rendered as part of the page content, rather than the`Document`, so that flush effects (like styles) are flushed before (or after) the div, rather than inside, where they would cause hydration mismatches.

ijjk · 2021-11-19T16:37:58Z

Failing test suites

Commit: ce0cc20

test/integration/document-functional-flush-effect/test/index.test.js

Functional Custom Document > development mode > supports custom flush handlers

Expand output

● Functional Custom Document › development mode › supports custom flush handlers

expect(received).toMatch(expected)

Expected pattern: /<foo><\/foo><bar><\/bar><span>Hello World!<\/span>/
Received string:  "<!DOCTYPE html><html><head><style data-next-hide-fouc=\"true\">body{display:none}</style><noscript data-next-hide-fouc=\"true\"><style>body{display:block}</style></noscript><meta charSet=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta name=\"next-head-count\" content=\"2\"/><noscript data-n-css=\"\"></noscript><script defer=\"\" nomodule=\"\" src=\"/_next/static/chunks/polyfills.js?ts=1637339867896\"></script><script src=\"/_next/static/chunks/webpack.js?ts=1637339867896\" defer=\"\"></script><script src=\"/_next/static/chunks/main.js?ts=1637339867896\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_app.js?ts=1637339867896\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/index.js?ts=1637339867896\" defer=\"\"></script><script src=\"/_next/static/development/_buildManifest.js?ts=1637339867896\" defer=\"\"></script><script src=\"/_next/static/development/_ssgManifest.js?ts=1637339867896\" defer=\"\"></script><script src=\"/_next/static/development/_middlewareManifest.js?ts=1637339867896\" defer=\"\"></script><noscript id=\"__next_css__DO_NOT_USE__\"></noscript></head><body><foo></foo><bar></bar><div id=\"__next\" data-reactroot=\"\"><span>Hello World!</span></div><script src=\"/_next/static/chunks/react-refresh.js?ts=1637339867896\"></script><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{}},\"page\":\"/\",\"query\":{},\"buildId\":\"development\",\"nextExport\":true,\"autoExport\":true,\"isFallback\":false,\"scriptLoader\":[]}</script></body></html>"

  15 |     })
  16 |
> 17 |     afterAll(() => killApp(app))
     |                          ^
  18 |
  19 |     it('supports custom flush handlers', async () => {
  20 |       const html = await renderViaHTTP(appPort, '/')

  at Object.<anonymous> (integration/document-functional-flush-effect/test/index.test.js:17:26)

ijjk · 2021-11-19T16:42:19Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js x-add-use-flush-handler	Change
buildDuration	18s	17.8s	-183ms
buildDurationCached	3.5s	3.7s	⚠️ +153ms
nodeModulesSize	339 MB	339 MB	⚠️ +7.56 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	azukaru/next.js x-add-use-flush-handler	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.948	2.958	⚠️ +0.01
/ avg req/sec	848.03	845.2	⚠️ -2.83
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.36	1.393	⚠️ +0.03
/error-in-render avg req/sec	1838.21	1794.24	⚠️ -43.97

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js x-add-use-flush-handler	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	28.3 kB	28.3 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.2 kB	72.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js x-add-use-flush-handler	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js x-add-use-flush-handler	Change
_app-HASH.js gzip	1.37 kB	1.37 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	635 B	635 B	✓
image-HASH.js gzip	4.45 kB	4.45 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.87 kB	1.87 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	13.3 kB	13.3 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js x-add-use-flush-handler	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js x-add-use-flush-handler	Change
index.html gzip	532 B	532 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js x-add-use-flush-handler	Change
buildDuration	19.6s	19.4s	-239ms
buildDurationCached	3.6s	3.6s	-39ms
nodeModulesSize	339 MB	339 MB	⚠️ +7.56 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	azukaru/next.js x-add-use-flush-handler	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.905	2.889	-0.02
/ avg req/sec	860.44	865.41	+4.97
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.398	1.368	-0.03
/error-in-render avg req/sec	1788.4	1827.34	+38.94

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js x-add-use-flush-handler	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.6 kB	28.6 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.5 kB	72.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js x-add-use-flush-handler	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js x-add-use-flush-handler	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	622 B	622 B	✓
image-HASH.js gzip	4.47 kB	4.47 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	1.91 kB	1.91 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	13.2 kB	13.2 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js x-add-use-flush-handler	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js x-add-use-flush-handler	Change
index.html gzip	532 B	532 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Commit: ce0cc20

Simplifies `renderToWebStream` a little bit for vercel#31223

Extracted from vercel#31223. We need to move the root `<div id="__next">` wrapper to be rendered as part of the page content, rather than the`Document`, so that flush effects (like styles) are flushed before (or after) the div, rather than inside, where they would cause hydration mismatches.

devknoll added 22 commits November 6, 2021 02:35

Add useLegacyGetInitialProps hook

2bc2141

Remove unstable prefix

cb41bb9

Merge branch 'canary' into x-add-legacy-gip-hook

e8c03fe

Add react hooks test

1583da8

Add hooks documentation

80a4112

Add useLegacyGetInitialProps test

f677888

Minor tweaks

c9edb31

Error if used multiple times

97de422

Add a comment about Document props

e54cb7f

Add suspense error & clarify Next.js

4a30c48

Fix copy-pasted test name

dab09ab

Merge branch 'canary' into x-add-legacy-gip-hook

c6076dc

Fix lint

b07d1b8

Merge branch 'canary' into x-add-legacy-gip-hook

6c575e2

Update docs

73d4f36

Simplify types

0368030

Merge branch 'canary' into x-add-legacy-gip-hook

7e2bcf2

Implement useFlushHandler

0f833dc

Merge branch 'canary' into x-add-use-flush-handler

fd740c7

Flush into stream

58404bb

Revert old changes

aeebd0a

Fix style generation

5110f6e

ijjk added created-by: Chrome Aurora type: next labels Nov 9, 2021

This comment has been minimized.

Sign in to view

devknoll added 3 commits November 9, 2021 20:24

Add tests

ad2259a

Merge branch 'canary' into x-add-use-flush-handler

32669dc

Fix lint

53b94d1

devknoll requested review from ijjk, shuding and timneutkens as code owners November 9, 2021 22:11

This comment has been minimized.

Sign in to view

Merge branch 'canary' into x-add-use-flush-handler

779eb5f

This comment has been minimized.

Sign in to view

huozhi reviewed Nov 11, 2021

View reviewed changes

packages/next/server/render.tsx Outdated Show resolved Hide resolved

shuding reviewed Nov 11, 2021

View reviewed changes

packages/next/server/render.tsx Outdated Show resolved Hide resolved

Merge branch 'canary' into x-add-use-flush-handler

25772ae

devknoll mentioned this pull request Nov 17, 2021

Minor simplifications to renderToWebStream #31553

Merged

timneutkens added the area: Concurrent Features label Nov 18, 2021

kodiakhq bot pushed a commit that referenced this pull request Nov 18, 2021

Minor simplifications to renderToWebStream (#31553)

9f7c774

Simplifies `renderToWebStream` a little bit for #31223

devknoll added 3 commits November 18, 2021 20:18

Merge branch 'canary' into x-add-use-flush-handler

87f3493

Finish support for getFlushPrefix

f224569

Use ReactElement instead of JSX.Element

373dfbe

This comment has been minimized.

Sign in to view

devknoll added 2 commits November 19, 2021 03:23

Fix tests

a2a48b5

Add styled-jsx test

5c598d4

devknoll mentioned this pull request Nov 19, 2021

Move root div to an app wrapper #31596

Merged

This comment has been minimized.

Sign in to view

Merge branch 'canary' into x-add-use-flush-handler

ce0cc20

natew pushed a commit to natew/next.js that referenced this pull request Feb 16, 2022

Minor simplifications to renderToWebStream (vercel#31553)

b23369b

Simplifies `renderToWebStream` a little bit for vercel#31223

devknoll closed this Feb 28, 2022

github-actions bot locked as resolved and limited conversation to collaborators Mar 31, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `useFlushEffect` hook #31223

Add `useFlushEffect` hook #31223

devknoll commented Nov 9, 2021 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Nov 19, 2021

ijjk commented Nov 19, 2021

Add useFlushEffect hook #31223

Add useFlushEffect hook #31223

Conversation

devknoll commented Nov 9, 2021 • edited Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Nov 19, 2021

Failing test suites

ijjk commented Nov 19, 2021

Stats from current PR

Add `useFlushEffect` hook #31223

Add `useFlushEffect` hook #31223

devknoll commented Nov 9, 2021 •

edited

Loading