@@ -3,7 +3,7 @@ import { createReadableStreamFromReadable } from '@react-router/node'
33import * as Sentry from '@sentry/react-router'
44import chalk from 'chalk'
55import { isbot } from 'isbot'
6- import * as ReactDOMServer from 'react-dom/server'
6+ import { renderToPipeableStream } from 'react-dom/server.node '
77import {
88 type ActionFunctionArgs ,
99 type HandleDocumentRequestFunction ,
@@ -19,16 +19,6 @@ import { authSessionStorage } from './utils/session.server.ts'
1919import { makeTimings } from './utils/timing.server.ts'
2020
2121const ABORT_DELAY = 5000
22- const renderToPipeableStream = (
23- ReactDOMServer as {
24- renderToPipeableStream ?: typeof import ( 'react-dom/server' ) . renderToPipeableStream
25- }
26- ) . renderToPipeableStream
27- const renderToReadableStream = (
28- ReactDOMServer as {
29- renderToReadableStream ?: ( ...args : any [ ] ) => Promise < ReadableStream >
30- }
31- ) . renderToReadableStream
3222
3323initEnv ( )
3424global . ENV = getEnv ( )
@@ -85,74 +75,40 @@ export default async function handleRequest(...args: DocRequestArgs) {
8575 : 'onShellReady'
8676
8777 const nonce = loadContext . cspNonce ?. toString ( ) ?? ''
88- if ( renderToPipeableStream ) {
89- return new Promise ( ( resolve , reject ) => {
90- let didError = false
91- // NOTE: this timing will only include things that are rendered in the shell
92- // and will not include suspended components and deferred loaders
93- const timings = makeTimings ( 'render' , 'renderToPipeableStream' )
94-
95- const { pipe, abort } = renderToPipeableStream (
96- < NonceProvider value = { nonce } >
97- < ServerRouter context = { remixContext } url = { request . url } nonce = { nonce } />
98- </ NonceProvider > ,
99- {
100- [ callbackName ] : ( ) => {
101- const body = new PassThrough ( )
102- responseHeaders . set ( 'Content-Type' , 'text/html' )
103- responseHeaders . append ( 'Server-Timing' , timings . toString ( ) )
104- resolve (
105- new Response ( createReadableStreamFromReadable ( body ) , {
106- headers : responseHeaders ,
107- status : didError ? 500 : responseStatusCode ,
108- } ) ,
109- )
110- pipe ( body )
111- } ,
112- onShellError : ( err : unknown ) => {
113- reject ( err )
114- } ,
115- onError : ( ) => {
116- didError = true
117- } ,
118- nonce,
78+ return new Promise ( ( resolve , reject ) => {
79+ let didError = false
80+ // NOTE: this timing will only include things that are rendered in the shell
81+ // and will not include suspended components and deferred loaders
82+ const timings = makeTimings ( 'render' , 'renderToPipeableStream' )
83+
84+ const { pipe, abort } = renderToPipeableStream (
85+ < NonceProvider value = { nonce } >
86+ < ServerRouter context = { remixContext } url = { request . url } nonce = { nonce } />
87+ </ NonceProvider > ,
88+ {
89+ [ callbackName ] : ( ) => {
90+ const body = new PassThrough ( )
91+ responseHeaders . set ( 'Content-Type' , 'text/html' )
92+ responseHeaders . append ( 'Server-Timing' , timings . toString ( ) )
93+ resolve (
94+ new Response ( createReadableStreamFromReadable ( body ) , {
95+ headers : responseHeaders ,
96+ status : didError ? 500 : responseStatusCode ,
97+ } ) ,
98+ )
99+ pipe ( body )
119100 } ,
120- )
121-
122- setTimeout ( abort , ABORT_DELAY )
123- } )
124- }
125-
126- if ( ! renderToReadableStream ) {
127- throw new Error ( 'No compatible React DOM server renderer found.' )
128- }
129-
130- let didError = false
131- const timings = makeTimings ( 'render' , 'renderToReadableStream' )
132- const abortController = new AbortController ( )
133- setTimeout ( ( ) => abortController . abort ( ) , ABORT_DELAY )
134- const body = await renderToReadableStream (
135- < NonceProvider value = { nonce } >
136- < ServerRouter context = { remixContext } url = { request . url } nonce = { nonce } />
137- </ NonceProvider > ,
138- {
139- nonce,
140- signal : abortController . signal ,
141- onError : ( ) => {
142- didError = true
101+ onShellError : ( err : unknown ) => {
102+ reject ( err )
103+ } ,
104+ onError : ( ) => {
105+ didError = true
106+ } ,
107+ nonce,
143108 } ,
144- } ,
145- )
146-
147- if ( callbackName === 'onAllReady' && 'allReady' in body ) {
148- await ( body as ReadableStream & { allReady ?: Promise < void > } ) . allReady
149- }
109+ )
150110
151- responseHeaders . set ( 'Content-Type' , 'text/html' )
152- responseHeaders . append ( 'Server-Timing' , timings . toString ( ) )
153- return new Response ( body , {
154- headers : responseHeaders ,
155- status : didError ? 500 : responseStatusCode ,
111+ setTimeout ( abort , ABORT_DELAY )
156112 } )
157113}
158114
0 commit comments