Skip to content

Commit

Permalink
Delay prefix flushing (#35170)
Browse files Browse the repository at this point in the history
Only happened with SSR without suspense case

Similar reason to #34474, the prefix (script parts) might be flushed during the render stream causing bad HTML. Use the same tricky to delay the prefix flushing

#### Expected
```html
<div>content</div> <!-- render stream --> 
<script>...</script> <!-- prefix --> 
```


#### Observed
```html
<!-- prefix choked the render stream --> 
<div <script>...</script> >content</div>
```


Test sample:
https://next-react-server-components-r5xocii9r-huozhi.vercel.app/ssr
  • Loading branch information
huozhi committed Mar 9, 2022
1 parent 201f98e commit 55c063e
Showing 1 changed file with 13 additions and 4 deletions.
17 changes: 13 additions & 4 deletions packages/next/server/render.tsx
Expand Up @@ -1820,17 +1820,25 @@ function createPrefixStream(
prefix: string
): TransformStream<Uint8Array, Uint8Array> {
let prefixFlushed = false
let prefixPrefixFlushFinished: Promise<void> | null = null
return createTransformStream({
transform(chunk, controller) {
controller.enqueue(chunk)
if (!prefixFlushed && prefix) {
prefixFlushed = true
controller.enqueue(chunk)
controller.enqueue(encodeText(prefix))
} else {
controller.enqueue(chunk)
prefixPrefixFlushFinished = new Promise((res) => {
// NOTE: streaming flush
// Enqueue prefix part before the major chunks are enqueued so that
// prefix won't be flushed too early to interrupt the data stream
setTimeout(() => {
controller.enqueue(encodeText(prefix))
res()
})
})
}
},
flush(controller) {
if (prefixPrefixFlushFinished) return prefixPrefixFlushFinished
if (!prefixFlushed && prefix) {
prefixFlushed = true
controller.enqueue(encodeText(prefix))
Expand All @@ -1850,6 +1858,7 @@ function createInlineDataStream(
if (!dataStreamFinished) {
const dataStreamReader = dataStream.getReader()

// NOTE: streaming flush
// We are buffering here for the inlined data stream because the
// "shell" stream might be chunkenized again by the underlying stream
// implementation, e.g. with a specific high-water mark. To ensure it's
Expand Down

0 comments on commit 55c063e

Please sign in to comment.