Add `RenderResult` #27319

devknoll · 2021-07-20T02:55:09Z

Adds RenderResult, replacing the string that renderToHTML used to return, with an Observable-like API that callers can use to subscribe and get a callback when chunks are available to flush, etc.

This is the last architectural change needed for streaming. There are, however, other things currently standing in the way of streaming. For example, it is common to mutate res in getServerSideProps to do routing work, or write headers, before fetching page data. This pattern effectively nullifies any advantages of streaming. I may do a follow-up PR that adds an experimental alternative for applications not using React 18, but the main purpose for this support is for Suspense and Server Components.

For that reason, there's no actual streaming here yet: instead we just flush a single chunk. A follow-up PR will add support for streaming suspense boundaries in React 18.

shuding

I think we should rename the property html to something like result to avoid confusion.

packages/next/export/worker.ts

ijjk · 2021-07-27T17:58:09Z

Failing test suites

Commit: 7520123

test/integration/auto-export-serverless/test/index.test.js

Auto Export Serverless > Refreshes query on mount

Expand output

● Auto Export Serverless › Refreshes query on mount

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

test/integration/404-page-custom-error/test/index.test.js

Default 404 Page with custom _error > serverless mode > should build successfully
Default 404 Page with custom _error > serverless mode > should respond to 404 correctly
Default 404 Page with custom _error > serverless mode > should render error correctly
Default 404 Page with custom _error > serverless mode > should render index page normal
Default 404 Page with custom _error > serverless mode > should have output 404.html

Expand output

● Default 404 Page with custom _error › serverless mode › should build successfully

expect(received).toBe(expected) // Object.is equality

Expected: 0
Received: 1

  92 |       })
  93 |
> 94 |       expect(code).toBe(0)
     |                    ^
  95 |
  96 |       appPort = await findPort()
  97 |       app = await nextStart(appDir, appPort)

  at Object.<anonymous> (integration/404-page-custom-error/test/index.test.js:94:20)

● Default 404 Page with custom _error › serverless mode › should respond to 404 correctly

FetchError: request to http://localhost:33645/404 failed, reason: connect ECONNREFUSED 127.0.0.1:33645

  at ClientRequest.<anonymous> (../node_modules/node-fetch/lib/index.js:1461:11)

● Default 404 Page with custom _error › serverless mode › should render error correctly

FetchError: request to http://localhost:33645/err failed, reason: connect ECONNREFUSED 127.0.0.1:33645

  at ClientRequest.<anonymous> (../node_modules/node-fetch/lib/index.js:1461:11)

● Default 404 Page with custom _error › serverless mode › should render index page normal

FetchError: request to http://localhost:33645/ failed, reason: connect ECONNREFUSED 127.0.0.1:33645

  at ClientRequest.<anonymous> (../node_modules/node-fetch/lib/index.js:1461:11)

● Default 404 Page with custom _error › serverless mode › should have output 404.html

No file for page /404

  618 |   const pageFile = pagesManifest[page]
  619 |   if (!pageFile) {
> 620 |     throw new Error(`No file for page ${page}`)
      |           ^
  621 |   }
  622 |
  623 |   return pageFile

  at getPageFileFromPagesManifest (lib/next-test-utils.js:620:11)
  at Object.<anonymous> (integration/404-page-custom-error/test/index.test.js:50:20)

test/integration/api-catch-all/test/index.test.js

API routes > Serverless support > should return data when catch-all
API routes > Serverless support > should return redirect when catch-all with index and trailing slash
API routes > Serverless support > should return data when catch-all with index and trailing slash
API routes > Serverless support > should return data when catch-all with index and no trailing slash

Expand output

● API routes › Serverless support › should return data when catch-all

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● API routes › Serverless support › should return redirect when catch-all with index and trailing slash

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● API routes › Serverless support › should return data when catch-all with index and trailing slash

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● API routes › Serverless support › should return data when catch-all with index and no trailing slash

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

test/integration/export-dynamic-pages-serverless/test/index.test.js

Export Dyanmic Pages > should of exported with correct asPath
Export Dyanmic Pages > should hydrate with correct asPath

Expand output

● Export Dyanmic Pages › should of exported with correct asPath

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● Export Dyanmic Pages › should hydrate with correct asPath

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● Test suite failed to run

TypeError: Cannot read property '__app' of undefined

  331 |
  332 | export async function stopApp(server) {
> 333 |   if (server.__app) {
      |              ^
  334 |     await server.__app.close()
  335 |   }
  336 |   await promiseCall(server, 'close')

  at stopApp (lib/next-test-utils.js:333:14)
  at integration/export-dynamic-pages-serverless/test/index.test.js:30:11

test/integration/image-optimization/test/index.test.js

Image optimization for serverless apps > On a static page > should not preload tiny images
Image optimization for serverless apps > On a static page > should not add a preload if one already exists
Image optimization for serverless apps > On a static page > should not preload hidden images
Image optimization for serverless apps > On a static page > should not preload SVG images
Image optimization for serverless apps > On a static page > should preload exactly two eligible images
Image optimization for serverless apps > On a static page with querystring > should preload exactly eligible image
Image optimization for serverless apps > On an SSR page > should not preload tiny images
Image optimization for serverless apps > On an SSR page > should not add a preload if one already exists
Image optimization for serverless apps > On an SSR page > should not preload hidden images
Image optimization for serverless apps > On an SSR page > should not preload SVG images
Image optimization for serverless apps > On an SSR page > should preload exactly two eligible images

Expand output

● Image optimization for serverless apps › On a static page › should not preload tiny images

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● Image optimization for serverless apps › On a static page › should not add a preload if one already exists

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● Image optimization for serverless apps › On a static page › should not preload hidden images

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● Image optimization for serverless apps › On a static page › should not preload SVG images

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● Image optimization for serverless apps › On a static page › should preload exactly two eligible images

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● Image optimization for serverless apps › On an SSR page › should not preload tiny images

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● Image optimization for serverless apps › On an SSR page › should not add a preload if one already exists

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● Image optimization for serverless apps › On an SSR page › should not preload hidden images

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● Image optimization for serverless apps › On an SSR page › should not preload SVG images

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● Image optimization for serverless apps › On an SSR page › should preload exactly two eligible images

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

● Image optimization for serverless apps › On a static page with querystring › should preload exactly eligible image

command failed with code 1

  147 |         code !== 0
  148 |       ) {
> 149 |         return reject(new Error(`command failed with code ${code}`))
      |                       ^
  150 |       }
  151 |
  152 |       resolve({

  at ChildProcess.<anonymous> (lib/next-test-utils.js:149:23)

ijjk · 2021-07-27T18:36:36Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js x-add-render-result-stream	Change
buildDuration	13.7s	14.2s	⚠️ +476ms
buildDurationCached	3.1s	3s	-32ms
nodeModulesSize	50.4 MB	50.4 MB	⚠️ +11 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	azukaru/next.js x-add-render-result-stream	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.447	2.489	⚠️ +0.04
/ avg req/sec	1021.59	1004.35	⚠️ -17.24
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.511	1.604	⚠️ +0.09
/error-in-render avg req/sec	1654.01	1558.69	⚠️ -95.32

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js x-add-render-result-stream	Change
359.HASH.js gzip	2.96 kB	2.96 kB	✓
745.HASH.js gzip	180 B	180 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	21 kB	21 kB	✓
webpack-HASH.js gzip	1.53 kB	1.53 kB	✓
Overall change	67.9 kB	67.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js x-add-render-result-stream	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	azukaru/next.js x-add-render-result-stream	Change
_app-HASH.js gzip	803 B	803 B	✓
_error-HASH.js gzip	3.06 kB	3.06 kB	✓
amp-HASH.js gzip	554 B	554 B	✓
css-HASH.js gzip	329 B	329 B	✓
dynamic-HASH.js gzip	2.52 kB	2.52 kB	✓
head-HASH.js gzip	2.28 kB	2.28 kB	✓
hooks-HASH.js gzip	903 B	903 B	✓
image-HASH.js gzip	5.63 kB	5.63 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	319 B	319 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	19.1 kB	19.1 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js x-add-render-result-stream	Change
_buildManifest.js gzip	489 B	489 B	✓
Overall change	489 B	489 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js x-add-render-result-stream	Change
index.html gzip	531 B	531 B	✓
link.html gzip	544 B	544 B	✓
withRouter.html gzip	525 B	525 B	✓
Overall change	1.6 kB	1.6 kB	✓

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js x-add-render-result-stream	Change
buildDuration	10.9s	10.9s	⚠️ +62ms
buildDurationCached	4.2s	4.2s	⚠️ +8ms
nodeModulesSize	50.4 MB	50.4 MB	⚠️ +11 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	azukaru/next.js x-add-render-result-stream	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.447	2.466	⚠️ +0.02
/ avg req/sec	1021.64	1013.83	⚠️ -7.81
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.56	1.539	-0.02
/error-in-render avg req/sec	1602.19	1624.18	+21.99

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js x-add-render-result-stream	Change
17.HASH.js gzip	2.98 kB	2.98 kB	✓
18.HASH.js gzip	185 B	185 B	✓
677f882d2ed8..HASH.js gzip	13.8 kB	13.8 kB	✓
framework.HASH.js gzip	41.9 kB	41.9 kB	✓
main-HASH.js gzip	8.4 kB	8.4 kB	✓
webpack-HASH.js gzip	1.22 kB	1.22 kB	✓
Overall change	68.5 kB	68.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js x-add-render-result-stream	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	azukaru/next.js x-add-render-result-stream	Change
_app-HASH.js gzip	791 B	791 B	✓
_error-HASH.js gzip	3.76 kB	3.76 kB	✓
amp-HASH.js gzip	552 B	552 B	✓
css-HASH.js gzip	333 B	333 B	✓
dynamic-HASH.js gzip	2.71 kB	2.71 kB	✓
head-HASH.js gzip	2.97 kB	2.97 kB	✓
hooks-HASH.js gzip	911 B	911 B	✓
index-HASH.js gzip	231 B	231 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	298 B	298 B	✓
script-HASH.js gzip	3.02 kB	3.02 kB	✓
withRouter-HASH.js gzip	294 B	294 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	17.6 kB	17.6 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js x-add-render-result-stream	Change
_buildManifest.js gzip	500 B	500 B	✓
Overall change	500 B	500 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js x-add-render-result-stream	Change
index.html gzip	577 B	577 B	✓
link.html gzip	588 B	588 B	✓
withRouter.html gzip	569 B	569 B	✓
Overall change	1.73 kB	1.73 kB	✓

Commit: a1d1163

Adds `RenderResult`, replacing the `string` that `renderToHTML` used to return, with an `Observable`-like API that callers can use to subscribe and get a callback when chunks are available to flush, etc. This is the last architectural change needed for streaming. There are, however, other things currently standing in the way of streaming. For example, it is common to mutate `res` in `getServerSideProps` to do routing work, or write headers, before fetching page data. This pattern effectively nullifies any advantages of streaming. I may do a follow-up PR that adds an experimental alternative for applications not using React 18, but the main purpose for this support is for Suspense and Server Components. For that reason, there's no actual streaming here yet: instead we just flush a single chunk. A follow-up PR will add support for streaming suspense boundaries in React 18.

ijjk added created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: next labels Jul 20, 2021

This comment has been minimized.

Sign in to view

devknoll added 3 commits July 20, 2021 17:12

Add RenderResult

3ea9285

Add basic streaming support

321996e

Clean up

225aa7e

devknoll force-pushed the x-add-render-result-stream branch from a67554d to 225aa7e Compare July 20, 2021 17:13

This comment has been minimized.

Sign in to view

Fix

81a7105

This comment has been minimized.

Sign in to view

Fix tests

0fdb956

This comment has been minimized.

Sign in to view

Fix JSON responses

58ce863

This comment has been minimized.

Sign in to view

devknoll added 2 commits July 21, 2021 17:13

Fix tests

d7dd835

Merge branch 'canary' into x-add-render-result-stream

69cf22f

This comment has been minimized.

Sign in to view

Fix tests

ce54947

This comment has been minimized.

Sign in to view

Output both static and chunked HTML

ba9fbdd

This comment has been minimized.

Sign in to view

Fix output

e4f8e71

This comment has been minimized.

Sign in to view

Fix export

f3c6674

This comment has been minimized.

Sign in to view

devknoll requested review from huozhi, ijjk, padmaia, shuding, styfle and timneutkens as code owners July 26, 2021 18:37

shuding reviewed Jul 27, 2021

View reviewed changes

shuding previously approved these changes Jul 27, 2021

View reviewed changes

Merge branch 'canary' into x-add-render-result-stream

4435cc3

This comment has been minimized.

Sign in to view

huozhi previously approved these changes Jul 27, 2021

View reviewed changes

packages/next/export/worker.ts Outdated Show resolved Hide resolved

Rename html -> result

2d8b6ba

devknoll dismissed stale reviews from huozhi and shuding via 2d8b6ba July 27, 2021 17:38

huozhi previously approved these changes Jul 27, 2021

View reviewed changes

shuding previously approved these changes Jul 27, 2021

View reviewed changes

This comment has been minimized.

Sign in to view

Fix lint

7520123

devknoll dismissed stale reviews from shuding and huozhi via 7520123 July 27, 2021 17:50

This comment has been minimized.

Sign in to view

devknoll added 2 commits July 27, 2021 18:17

Fix lint (again)

6a69287

Fix build

a1d1163

shuding approved these changes Jul 27, 2021

View reviewed changes

kodiakhq bot merged commit 707afe1 into vercel:canary Jul 27, 2021

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

Add `RenderResult` #27319

Add `RenderResult` #27319

devknoll commented Jul 20, 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.

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.

shuding left a comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Jul 27, 2021 •

edited

Loading

This comment has been minimized.

ijjk commented Jul 27, 2021

Add RenderResult #27319

Add RenderResult #27319

Conversation

devknoll commented Jul 20, 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.

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.

shuding left a comment

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Jul 27, 2021 • edited Loading

Failing test suites

This comment has been minimized.

ijjk commented Jul 27, 2021

Stats from current PR

Add `RenderResult` #27319

Add `RenderResult` #27319

devknoll commented Jul 20, 2021 •

edited

Loading

ijjk commented Jul 27, 2021 •

edited

Loading