Refactor server/render for SSR streaming #31231

shuding · 2021-11-10T00:18:11Z

Initial step to refactor the rendering logic by decoupling the handler and renderer:

Delegate Flight rendering to server/render
Reuse the piper glue code for both Fizz and Flight streams
Add buffering for ReadableStream

In 1), this PR also makes sure that gSSP/gSP are correctly executed before the Flight stream and pageProps and router are correctly delivered to the component.

Related to #30994.

Bug

Related issues linked using fixes #number
Integration tests added
Errors have helpful link attached, see contributing.md

Feature

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Related issues linked using fixes #number
Integration tests added
Documentation added
Telemetry added. In case of a feature if it's used or not.
Errors have helpful link attached, see contributing.md

Documentation / Examples

Make sure the linting passes by running yarn lint

packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts

packages/next/server/render.tsx

devknoll

I think server/render is getting out of hand, but that doesn't need to block this PR. Will spec out a change.

devknoll · 2021-11-14T16:10:26Z

packages/next/server/render.tsx

+  }
+  const Component = (props: any) => {
+    return (
+      <React.Suspense fallback={null}>


FYI, Frameworks shouldn't insert suspense boundaries, because the app has no way to customize the fallback/loading state. What do we need this for?

This is how it's implemented in Next.js today:

next.js/packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts

Lines 92 to 98 in 28a5d7a

const Component = props => {

return createElement(

React.Suspense,

{ fallback: null },

createElement(FlightWrapper, props)

)

}`

and previously the top-level suspense boundary didn't exist. We can surely get rid of it, but I'm unsure if it will cause hydration mismatch on the client side since we'll need a boundary there.

devknoll · 2021-11-14T16:14:17Z

packages/next/server/render.tsx

@@ -274,6 +277,49 @@ function checkRedirectValues(
  }
 }

+// Create the wrapper component for a Flight stream.
+function createServerComponentRenderer(


We should move this to compile time, but that doesn't block this PR.

An overall refactoring to the middleware, server/next-server and server/render is needed.

devknoll · 2021-11-14T16:34:38Z

packages/next/server/render.tsx

+  }
+}
+
+function renderToWebStream(


Not super sure what's happening here. You don't need (or really want, since it could lead to early buffering) a startWriting -- you should just need to start reading from the stream inside the returned piper function.

I'd just move the buffering up to the middleware layer.

Something was introduced in #31186, to delay resolving until onCompleteShell happens. If there is an error occurred before that, we need to throw, otherwise we can safely return the piper.

shuding · 2021-11-14T17:06:52Z

Agreed that server/render is getting out of hand, looking forward to your spec!

ijjk · 2021-11-15T15:09:25Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	shuding/next.js shu/56d0	Change
buildDuration	23.7s	24s	⚠️ +338ms
buildDurationCached	4.4s	4.4s	⚠️ +57ms
nodeModulesSize	335 MB	335 MB	⚠️ +4.41 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	shuding/next.js shu/56d0	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.748	4.006	⚠️ +0.26
/ avg req/sec	667.09	624.06	⚠️ -43.03
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.024	2.019	0
/error-in-render avg req/sec	1234.98	1238.1	+3.12

Client Bundles (main, webpack, commons)

	vercel/next.js canary	shuding/next.js shu/56d0	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	shuding/next.js shu/56d0	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	shuding/next.js shu/56d0	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.44 kB	4.44 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	shuding/next.js shu/56d0	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	shuding/next.js shu/56d0	Change
index.html gzip	521 B	521 B	✓
link.html gzip	534 B	534 B	✓
withRouter.html gzip	515 B	515 B	✓
Overall change	1.57 kB	1.57 kB	✓

Default Build with SWC (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	shuding/next.js shu/56d0	Change
buildDuration	24.2s	24.1s	-34ms
buildDurationCached	4.3s	4.3s	⚠️ +16ms
nodeModulesSize	335 MB	335 MB	⚠️ +4.41 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	shuding/next.js shu/56d0	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.749	3.878	⚠️ +0.13
/ avg req/sec	666.86	644.61	⚠️ -22.25
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.982	1.955	-0.03
/error-in-render avg req/sec	1261.32	1278.5	+17.18

Client Bundles (main, webpack, commons)

	vercel/next.js canary	shuding/next.js shu/56d0	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.5 kB	28.5 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	shuding/next.js shu/56d0	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	shuding/next.js shu/56d0	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.46 kB	4.46 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	shuding/next.js shu/56d0	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	shuding/next.js shu/56d0	Change
index.html gzip	523 B	523 B	✓
link.html gzip	535 B	535 B	✓
withRouter.html gzip	516 B	516 B	✓
Overall change	1.57 kB	1.57 kB	✓

Commit: 51a8c15

refactor render

1916e52

This comment has been minimized.

Sign in to view

create readable stream connector

200159e

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Nov 11, 2021

fix closing stream

6d2a6d2

shuding changed the title ~~Delegate Flight rendering logic to server/render~~ Refactor server/render for SSR streaming Nov 11, 2021

ensure that router is passed to page

b932c72

This comment has been minimized.

Sign in to view

devknoll reviewed Nov 11, 2021

View reviewed changes

packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts Outdated Show resolved Hide resolved

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

shuding added 2 commits November 12, 2021 01:31

refactor

ae4fa67

code refactoring

9df1420

shuding added this to In Progress in React Server Components in Next.js (Alpha) Nov 12, 2021

shuding added area: Concurrent Features area: Server Components React Server Components labels Nov 12, 2021

shuding added 2 commits November 12, 2021 19:19

resolve conflicts

68443bb

fix page props and stream

a98da84

shuding marked this pull request as ready for review November 13, 2021 17:29

shuding requested review from huozhi, ijjk, padmaia and timneutkens as code owners November 13, 2021 17:29

Merge branch 'canary' into shu/56d0

db060e1

This comment has been minimized.

Sign in to view

shuding requested a review from devknoll November 13, 2021 20:44

devknoll reviewed Nov 14, 2021

View reviewed changes

React Server Components in Next.js (Alpha) automation moved this from In Progress to In review Nov 15, 2021

huozhi previously approved these changes Nov 15, 2021

View reviewed changes

fix linter error

d6d3884

shuding dismissed huozhi’s stale review via d6d3884 November 15, 2021 14:44

Merge branch 'canary' into shu/56d0

cd946bd

huozhi approved these changes Nov 15, 2021

View reviewed changes

Merge branch 'canary' into shu/56d0

51a8c15

kodiakhq bot merged commit 16d56e2 into vercel:canary Nov 15, 2021

React Server Components in Next.js (Alpha) automation moved this from In review to Done Nov 15, 2021

shuding deleted the shu/56d0 branch November 15, 2021 16:16

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor server/render for SSR streaming #31231

Refactor server/render for SSR streaming #31231

shuding commented Nov 10, 2021 •

edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

devknoll left a comment •

edited

devknoll Nov 14, 2021

shuding Nov 14, 2021

devknoll Nov 14, 2021

shuding Nov 14, 2021

devknoll Nov 14, 2021

shuding Nov 14, 2021

shuding commented Nov 14, 2021

ijjk commented Nov 15, 2021

	const Component = props => {
	return createElement(
	React.Suspense,
	{ fallback: null },
	createElement(FlightWrapper, props)
	)
	}`

Refactor server/render for SSR streaming #31231

Refactor server/render for SSR streaming #31231

Conversation

shuding commented Nov 10, 2021 • edited

Bug

Feature

Documentation / Examples

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

devknoll left a comment • edited

Choose a reason for hiding this comment

devknoll Nov 14, 2021

Choose a reason for hiding this comment

shuding Nov 14, 2021

Choose a reason for hiding this comment

devknoll Nov 14, 2021

Choose a reason for hiding this comment

shuding Nov 14, 2021

Choose a reason for hiding this comment

devknoll Nov 14, 2021

Choose a reason for hiding this comment

shuding Nov 14, 2021

Choose a reason for hiding this comment

shuding commented Nov 14, 2021

ijjk commented Nov 15, 2021

Stats from current PR

shuding commented Nov 10, 2021 •

edited

devknoll left a comment •

edited