Fix streaming SSR with multi-byte characters #35724

martinnabhan · 2022-03-30T10:55:30Z

When using streaming SSR decodeText is called repeatedly with incoming chunks of data.
In that case a multi-byte character may occasionally split between chunks, causing corruption.
By setting the TextDecoder option 'stream' to true, and reusing the same TextDecoder instance,
TextDecoder will memorise “unfinished” characters and decode them when the next chunk comes.

I found out about the stream option here: https://javascript.info/text-decoder

martinnabhan · 2022-03-30T10:56:30Z

packages/next/server/node-web-streams-helper.ts

-export function decodeText(input?: Uint8Array) {
-  return new TextDecoder().decode(input)
+export function decodeText(input?: Uint8Array, textDecoder?: TextDecoder) {
+  return textDecoder ? textDecoder.decode(input, { stream: true } ) : new TextDecoder().decode(input)


Since decodeText is being exported I didn't want to mess with the code signature, so I just added the textDecoder argument.

martinnabhan · 2022-03-30T10:56:55Z

packages/next/server/node-web-streams-helper.ts

@@ -207,9 +207,11 @@ export function createBufferedTransformStream(): TransformStream<
    return pendingFlush
  }

+  const textDecoder = new TextDecoder();


We need to keep the same TextEncoder instance until the stream ends, or else the stream option won't work.

shuding

Thanks!

huozhi

pause for incoming patch, will re-approve later. would be nice to have a test during this period

martinnabhan · 2022-03-30T15:11:12Z

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

+          export default function Page() {
+            return (
+              <div>
+                <p>{"マルチバイト".repeat(28)}</p>


マルチバイト is multi-byte in Japanese. Repeating this word exactly 28 times results in corrupted text in the response.

martinnabhan · 2022-03-30T15:14:21Z

I've added a test. Thank you so much for the work you do on Next.js!

shuding · 2022-03-30T16:01:48Z

Thanks for adding the test!

huozhi

Thanks! 🙏

shuding · 2022-03-30T16:26:24Z

It seems that there's a lint error in packages/next/server/node-web-streams-helper.ts.

When using streaming SSR decodeText is called repeatedly with incoming chunks of data. In that case a multi-byte character may occasionally split between chunks, causing corruption. By setting the TextDecoder option 'stream' to true, and reusing the same TextDecoder instance, TextDecoder will memorise “unfinished” characters and decode them when the next chunk comes.

martinnabhan · 2022-03-30T16:32:07Z

I'm sorry, my bad! I ran lint-fix and pushed the changes.

ijjk · 2022-03-30T17:04:54Z

Failing test suites

Commit: 04cf4c9

yarn testheadless test/integration/cli/test/index.test.js

CLI Usage > info > should print output

Expand output

● CLI Usage › info › should print output

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

Expected: ""
Received: "warn  - Latest canary version not detected, detected: \"12.1.3-canary.2\", newest: \"12.1.3-canary.3\".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue
"

  496 |       // warning will show so skip this check for the stable release
  497 |       if (pkg.version.includes('-canary')) {
> 498 |         expect(info.stderr || '').toBe('')
      |                                   ^
  499 |       }
  500 |       expect(info.stdout).toMatch(
  501 |         new RegExp(`

  at Object.<anonymous> (integration/cli/test/index.test.js:498:35)

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

ijjk · 2022-03-30T17:15:31Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	martinnabhan/next.js fix/multi-byte-streaming-ssr	Change
buildDuration	16.5s	16.1s	-394ms
buildDurationCached	6.3s	6.4s	⚠️ +124ms
nodeModulesSize	467 MB	467 MB	⚠️ +336 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	martinnabhan/next.js fix/multi-byte-streaming-ssr	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.349	3.289	-0.06
/ avg req/sec	746.49	760.04	+13.55
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.501	1.484	-0.02
/error-in-render avg req/sec	1665.26	1684.63	+19.37

Client Bundles (main, webpack)

	vercel/next.js canary	martinnabhan/next.js fix/multi-byte-streaming-ssr	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	28.4 kB	28.4 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.1 kB	72.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	martinnabhan/next.js fix/multi-byte-streaming-ssr	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	martinnabhan/next.js fix/multi-byte-streaming-ssr	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.48 kB	5.48 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	15.2 kB	15.2 kB	✓

Client Build Manifests

	vercel/next.js canary	martinnabhan/next.js fix/multi-byte-streaming-ssr	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	martinnabhan/next.js fix/multi-byte-streaming-ssr	Change
index.html gzip	532 B	532 B	✓
link.html gzip	546 B	546 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	martinnabhan/next.js fix/multi-byte-streaming-ssr	Change
buildDuration	19.8s	19.8s	⚠️ +21ms
buildDurationCached	6.3s	6.4s	⚠️ +64ms
nodeModulesSize	467 MB	467 MB	⚠️ +336 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	martinnabhan/next.js fix/multi-byte-streaming-ssr	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.32	3.294	-0.03
/ avg req/sec	752.97	758.94	+5.97
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.525	1.459	-0.07
/error-in-render avg req/sec	1639.27	1713.5	+74.23

Client Bundles (main, webpack)

	vercel/next.js canary	martinnabhan/next.js fix/multi-byte-streaming-ssr	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.8 kB	28.8 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.7 kB	72.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	martinnabhan/next.js fix/multi-byte-streaming-ssr	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	martinnabhan/next.js fix/multi-byte-streaming-ssr	Change
_app-HASH.js gzip	1.35 kB	1.35 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.59 kB	5.59 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	15.3 kB	15.3 kB	✓

Client Build Manifests

	vercel/next.js canary	martinnabhan/next.js fix/multi-byte-streaming-ssr	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes

	vercel/next.js canary	martinnabhan/next.js fix/multi-byte-streaming-ssr	Change
index.html gzip	532 B	532 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.6 kB	1.6 kB	✓

Commit: 04cf4c9

martinnabhan requested review from timneutkens, ijjk, shuding and huozhi as code owners March 30, 2022 10:55

ijjk added the type: next label Mar 30, 2022

martinnabhan commented Mar 30, 2022

View reviewed changes

shuding previously approved these changes Mar 30, 2022

View reviewed changes

This comment has been minimized.

Sign in to view

huozhi approved these changes Mar 30, 2022

View reviewed changes

huozhi requested changes Mar 30, 2022

View reviewed changes

This comment has been minimized.

Sign in to view

martinnabhan dismissed shuding’s stale review via 4229aa7 March 30, 2022 15:07

martinnabhan force-pushed the fix/multi-byte-streaming-ssr branch 3 times, most recently from 986bdbb to 6c7de5e Compare March 30, 2022 15:09

martinnabhan commented Mar 30, 2022

View reviewed changes

huozhi previously approved these changes Mar 30, 2022

View reviewed changes

This comment has been minimized.

Sign in to view

martinnabhan dismissed huozhi’s stale review via 04cf4c9 March 30, 2022 16:30

martinnabhan force-pushed the fix/multi-byte-streaming-ssr branch from 14a3369 to 04cf4c9 Compare March 30, 2022 16:30

huozhi approved these changes Mar 30, 2022

View reviewed changes

huozhi merged commit 7b3ec57 into vercel:canary Mar 30, 2022

NOUIY mentioned this pull request Apr 21, 2022

[Snyk] Upgrade next from 12.0.7 to 12.1.4 NOUIY/next.js#147

Open

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix streaming SSR with multi-byte characters #35724

Fix streaming SSR with multi-byte characters #35724

martinnabhan commented Mar 30, 2022

martinnabhan Mar 30, 2022

martinnabhan Mar 30, 2022 •

edited

shuding left a comment

This comment has been minimized.

This comment has been minimized.

huozhi left a comment

This comment has been minimized.

martinnabhan Mar 30, 2022

martinnabhan commented Mar 30, 2022

shuding commented Mar 30, 2022

huozhi left a comment

This comment has been minimized.

shuding commented Mar 30, 2022

martinnabhan commented Mar 30, 2022

ijjk commented Mar 30, 2022

ijjk commented Mar 30, 2022

Fix streaming SSR with multi-byte characters #35724

Fix streaming SSR with multi-byte characters #35724

Conversation

martinnabhan commented Mar 30, 2022

martinnabhan Mar 30, 2022

Choose a reason for hiding this comment

martinnabhan Mar 30, 2022 • edited

Choose a reason for hiding this comment

shuding left a comment

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

huozhi left a comment

Choose a reason for hiding this comment

This comment has been minimized.

martinnabhan Mar 30, 2022

Choose a reason for hiding this comment

martinnabhan commented Mar 30, 2022

shuding commented Mar 30, 2022

huozhi left a comment

Choose a reason for hiding this comment

This comment has been minimized.

shuding commented Mar 30, 2022

martinnabhan commented Mar 30, 2022

ijjk commented Mar 30, 2022

Failing test suites

ijjk commented Mar 30, 2022

Stats from current PR

martinnabhan Mar 30, 2022 •

edited