Adopt react 18 rc1 #34972

huozhi · 2022-03-02T17:09:26Z

Changes

Remove top-level suspense boundary
Pipe stream resolved from returned promimse of renderToReadableStream
Remove jsx-runtime alias hack

Test Changes

Since top level suspense boundary is removed, now content are filled in 1st SSR

ijjk · 2022-03-02T17:27:17Z

Failing test suites

Commit: 3bd2179

yarn testheadless test/production/react-18-streaming-ssr/index.test.ts

react 18 streaming SSR in minimal mode > should generate html response by streaming correctly
react 18 streaming SSR with custom next configs > should redirect paths without trailing-slash and render when slash is appended

Expand output

● react 18 streaming SSR in minimal mode › should generate html response by streaming correctly

thrown: "Exceeded timeout of 90000 ms for a hook.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

   6 |   let next: NextInstance
   7 |
>  8 |   beforeAll(async () => {
     |   ^
   9 |     process.env.NEXT_PRIVATE_MINIMAL_MODE = '1'
  10 |
  11 |     next = await createNext({

  at production/react-18-streaming-ssr/index.test.ts:8:3
  at Object.<anonymous> (production/react-18-streaming-ssr/index.test.ts:5:1)

● react 18 streaming SSR with custom next configs › should redirect paths without trailing-slash and render when slash is appended

thrown: "Exceeded timeout of 90000 ms for a hook.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  44 |   let next: NextInstance
  45 |
> 46 |   beforeAll(async () => {
     |   ^
  47 |     next = await createNext({
  48 |       files: {
  49 |         'pages/hello.js': `

  at production/react-18-streaming-ssr/index.test.ts:46:3
  at Object.<anonymous> (production/react-18-streaming-ssr/index.test.ts:43:1)

● Test suite failed to run

TypeError: Cannot read property 'destroy' of undefined

  32 |   afterAll(() => {
  33 |     delete process.env.NEXT_PRIVATE_MINIMAL_MODE
> 34 |     next.destroy()
     |          ^
  35 |   })
  36 |
  37 |   it('should generate html response by streaming correctly', async () => {

  at production/react-18-streaming-ssr/index.test.ts:34:10

● Test suite failed to run

TypeError: Cannot read property 'destroy' of undefined

  66 |     })
  67 |   })
> 68 |   afterAll(() => next.destroy())
     |                       ^
  69 |
  70 |   it('should redirect paths without trailing-slash and render when slash is appended', async () => {
  71 |     const page = '/hello'

  at production/react-18-streaming-ssr/index.test.ts:68:23

Read more about building and testing Next.js in contributing.md.

test/integration/react-streaming-and-server-components/app/next.config.js

packages/next/build/webpack/loaders/next-flight-server-loader.ts

ijjk · 2022-03-02T21:15:30Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	huozhi/next.js react-18-rc1	Change
buildDuration	15.1s	15.2s	⚠️ +94ms
buildDurationCached	6s	6.1s	⚠️ +73ms
nodeModulesSize	372 MB	372 MB	-412 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	huozhi/next.js react-18-rc1	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.942	2.916	-0.03
/ avg req/sec	849.72	857.22	+7.5
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.176	1.194	⚠️ +0.02
/error-in-render avg req/sec	2126.47	2094.27	⚠️ -32.2

Client Bundles (main, webpack)

	vercel/next.js canary	huozhi/next.js react-18-rc1	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	27.9 kB	27.9 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.5 kB	71.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js react-18-rc1	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	huozhi/next.js react-18-rc1	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	309 B	309 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.57 kB	2.57 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.06 kB	5.06 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.26 kB	2.26 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.8 kB	14.8 kB	✓

Client Build Manifests

	vercel/next.js canary	huozhi/next.js react-18-rc1	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	huozhi/next.js react-18-rc1	Change
index.html gzip	532 B	532 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	525 B	525 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for main-HASH.js

@@ -1149,6 +1149,7 @@
           shouldHydrate ? markHydrateComplete : markRenderComplete
         );
         if (false) {
+          var ReactDOMClient;
         } else {
           // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldHydrate) {

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-ecb9266ba5c23fea.js"
+      src="/_next/static/chunks/main-d899d849ecf228ef.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-ecb9266ba5c23fea.js"
+      src="/_next/static/chunks/main-d899d849ecf228ef.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-ecb9266ba5c23fea.js"
+      src="/_next/static/chunks/main-d899d849ecf228ef.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	huozhi/next.js react-18-rc1	Change
buildDuration	18.3s	18.4s	⚠️ +60ms
buildDurationCached	6.2s	6s	-147ms
nodeModulesSize	372 MB	372 MB	-412 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	huozhi/next.js react-18-rc1	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.934	2.966	⚠️ +0.03
/ avg req/sec	851.97	842.82	⚠️ -9.15
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.19	1.194	0
/error-in-render avg req/sec	2101.7	2094.3	⚠️ -7.4

Client Bundles (main, webpack)

	vercel/next.js canary	huozhi/next.js react-18-rc1	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.1 kB	28.1 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.1 kB	72.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js react-18-rc1	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	huozhi/next.js react-18-rc1	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	313 B	313 B	✓
css-HASH.js gzip	324 B	324 B	✓
dynamic-HASH.js gzip	2.56 kB	2.56 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	921 B	921 B	✓
image-HASH.js gzip	5.2 kB	5.2 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.33 kB	2.33 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	388 B	388 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.9 kB	14.9 kB	✓

Client Build Manifests

	vercel/next.js canary	huozhi/next.js react-18-rc1	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes

	vercel/next.js canary	huozhi/next.js react-18-rc1	Change
index.html gzip	530 B	530 B	✓
link.html gzip	543 B	543 B	✓
withRouter.html gzip	525 B	525 B	✓
Overall change	1.6 kB	1.6 kB	✓

Diffs

Diff for main-HASH.js

@@ -1149,6 +1149,7 @@
           shouldHydrate ? markHydrateComplete : markRenderComplete
         );
         if (false) {
+          var ReactDOMClient;
         } else {
           // The check for `.hydrate` is there to support React alternatives like preact
           if (shouldHydrate) {

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-ecb9266ba5c23fea.js"
+      src="/_next/static/chunks/main-d899d849ecf228ef.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-ecb9266ba5c23fea.js"
+      src="/_next/static/chunks/main-d899d849ecf228ef.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-ecb9266ba5c23fea.js"
+      src="/_next/static/chunks/main-d899d849ecf228ef.js"
       defer=""
     ></script>
     <script

Commit: 8abceb9

devknoll · 2022-03-03T00:01:33Z

packages/next/server/render.tsx

-      onCompleteAll() {
-        doResolve()
-      },


We don't want to remove this, because otherwise we will serve partial streams to crawlers. Instead, you can make the function async now (instead of directly constructing a promise) and do something like this instead:

let resolveAllCompleted const allCompleted = new Promise(resolve => { resolveAllCompleted = resolve }) const renderStream = await ReactDOMServer.renderToReadableStream(element, { onError(err: Error) { // TODO: Log non-fatal error }, onCompleteAll() { resolveAllCompleted() } } if (generateStaticHTML) { // Wait for the entire stream to complete before resolving await allCompleted } // doResolve(renderStream) stuff here

There should be a test case against this, we should also find out why it didn't fail here...

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Mar 2, 2022

huozhi force-pushed the react-18-rc1 branch from 3bd2179 to be42121 Compare March 2, 2022 17:45

This comment has been minimized.

Sign in to view

huozhi added 4 commits March 2, 2022 20:30

Adopt react 18 rc1

e687574

remove generateStaticHTML param

839abed

update test

0b55f19

remove invalid test

ba9f07e

huozhi force-pushed the react-18-rc1 branch from e39a477 to ba9f07e Compare March 2, 2022 19:30

huozhi marked this pull request as ready for review March 2, 2022 19:36

huozhi requested review from timneutkens, ijjk, shuding and padmaia as code owners March 2, 2022 19:36

huozhi requested a review from devknoll March 2, 2022 19:37

shuding reviewed Mar 2, 2022

View reviewed changes

test/integration/react-streaming-and-server-components/app/next.config.js Show resolved Hide resolved

packages/next/build/webpack/loaders/next-flight-server-loader.ts Outdated Show resolved Hide resolved

This comment has been minimized.

Sign in to view

huozhi added 2 commits March 2, 2022 21:42

make production test more solid

577adea

merge edge cases

147eed9

shuding approved these changes Mar 2, 2022

View reviewed changes

Merge branch 'canary' into react-18-rc1

8abceb9

kodiakhq bot merged commit e3d0d64 into vercel:canary Mar 2, 2022

huozhi deleted the react-18-rc1 branch March 2, 2022 21:23

devknoll reviewed Mar 3, 2022

View reviewed changes

This was referenced Mar 4, 2022

Not working with React 18 rc.1 vercel/next-react-server-components#32

Closed

Attempting to use Streaming SSR (Alpha) produces TypeError: readable.getReader is not a function #35050

Closed

github-actions bot locked as resolved and limited conversation to collaborators Apr 2, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adopt react 18 rc1 #34972

Adopt react 18 rc1 #34972

huozhi commented Mar 2, 2022

ijjk commented Mar 2, 2022

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Mar 2, 2022

Diffs

Diffs

devknoll Mar 3, 2022 •

edited

devknoll Mar 3, 2022

Adopt react 18 rc1 #34972

Adopt react 18 rc1 #34972

Conversation

huozhi commented Mar 2, 2022

Changes

Test Changes

ijjk commented Mar 2, 2022

Failing test suites

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Mar 2, 2022

Stats from current PR

Diffs

Diffs

devknoll Mar 3, 2022 • edited

Choose a reason for hiding this comment

devknoll Mar 3, 2022

Choose a reason for hiding this comment

devknoll Mar 3, 2022 •

edited