diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx index 87b45ab0b44af..4c00eb0b92fca 100644 --- a/packages/next/server/render.tsx +++ b/packages/next/server/render.tsx @@ -1764,19 +1764,28 @@ function createInlineDataStream( if (!dataStreamFinished && dataStream) { const dataStreamReader = dataStream.getReader() - dataStreamFinished = (async () => { - try { - while (true) { - const { done, value } = await dataStreamReader.read() - if (done) { - return + + // 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 + // the safe timing to pipe the data stream, this extra tick is + // necessary. + dataStreamFinished = new Promise((res) => + setTimeout(async () => { + try { + while (true) { + const { done, value } = await dataStreamReader.read() + if (done) { + return res() + } + controller.enqueue(value) } - controller.enqueue(value) + } catch (err) { + controller.error(err) } - } catch (err) { - controller.error(err) - } - })() + res() + }, 0) + ) } }, flush() {