@shopify/hydrogen 0.11.0-experimental.1 → 0.11.1-experimental.0

package/dist/esnext/entry-server.js

@@ -1,330 +1,365 @@
 import React from 'react';
-import { logServerResponse, getLoggerFromContext, log as noContextLogger, } from './utilities/log/log';
+import { logServerResponse, logCacheControlHeaders, logQueryTimings, getLoggerWithContext, } from './utilities/log';
 import { getErrorMarkup } from './utilities/error';
 import { defer } from './utilities/defer';
 import { Html } from './framework/Hydration/Html';
 import { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
+import { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
 import { getCacheControlHeader } from './framework/cache';
-import { ServerRequestProvider } from './foundation/ServerRequestProvider';
-import { getApiRouteFromURL, getApiRoutesFromPages } from './utilities/apiRoutes';
+import { preloadRequestCacheData, ServerRequestProvider, } from './foundation/ServerRequestProvider';
+import { getApiRouteFromURL, renderApiRoute, getApiRoutesFromPages, } from './utilities/apiRoutes';
 import { ServerStateProvider } from './foundation/ServerStateProvider';
-import { ssrRenderToPipeableStream, ssrRenderToReadableStream, rscRenderToReadableStream, createFromReadableStream, } from './streaming.server';
+import { isBotUA } from './utilities/bot-ua';
+import { setContext, setCache } from './framework/runtime';
+import { setConfig } from './framework/config';
+import { ssrRenderToPipeableStream, ssrRenderToReadableStream, rscRenderToReadableStream, createFromReadableStream, supportsReadableStream, isStreamingSupported, bufferReadableStream, } from './streaming.server';
 import { RSC_PATHNAME } from './constants';
-/**
- * If a query is taking too long, or something else went wrong,
- * send back a response containing the Suspense fallback and rely
- * on the client to hydrate and build the React tree.
- */
-const STREAM_ABORT_TIMEOUT_MS = 3000;
+import { stripScriptsFromTemplate } from './utilities/template';
 const HTML_CONTENT_TYPE = 'text/html; charset=UTF-8';
-const renderHydrogen = (App, { pages }) => {
-    /**
-     * The render function is responsible for turning the provided `App` into an HTML string,
-     * and returning any initial state that needs to be hydrated into the client version of the app.
-     * NOTE: This is currently only used for SEO bots or Worker runtime (where Stream is not yet supported).
-     */
-    const render = async function (url, { request, template, nonce, dev }) {
-        const { log, state, componentResponse } = setupCurrentRequest(url, request);
-        const { AppSSR, rscReadable } = buildAppSSR({
+export const renderHydrogen = (App, { pages }) => {
+    const handleRequest = async function (rawRequest, { indexTemplate, streamableResponse, dev, cache, context, nonce }) {
+        const request = new ServerComponentRequest(rawRequest);
+        const url = new URL(request.url);
+        const log = getLoggerWithContext(request);
+        const componentResponse = new ServerComponentResponse();
+        /**
+         * Inject the cache & context into the module loader so we can pull it out for subrequests.
+         */
+        setCache(cache);
+        setContext(context);
+        setConfig({ dev });
+        const isReactHydrationRequest = url.pathname === RSC_PATHNAME;
+        let template = typeof indexTemplate === 'function'
+            ? await indexTemplate(url.toString())
+            : indexTemplate;
+        if (template && typeof template !== 'string') {
+            template = template.default;
+        }
+        if (!isReactHydrationRequest && pages) {
+            const apiRoute = getApiRoute(url, { pages });
+            // The API Route might have a default export, making it also a server component
+            // If it does, only render the API route if the request method is GET
+            if (apiRoute &&
+                (!apiRoute.hasServerComponent || request.method !== 'GET')) {
+                return renderApiRoute(request, apiRoute);
+            }
+        }
+        const isStreamable = !isBotUA(url, request.headers.get('user-agent')) &&
+            (!!streamableResponse || supportsReadableStream());
+        const params = {
             App,
-            state,
-            request,
-            response: componentResponse,
-            pages,
             log,
-        }, { template });
-        let [html, flight] = await Promise.all([
-            renderToBufferedString(AppSSR, { log, nonce }),
-            bufferReadableStream(rscReadable.getReader()),
-        ]);
-        const { headers, status, statusText } = getResponseOptions(componentResponse);
+            dev,
+            pages,
+            nonce,
+            request,
+            template,
+            isStreamable,
+            componentResponse,
+            response: streamableResponse,
+        };
+        if (isReactHydrationRequest) {
+            return hydrate(url, params);
+        }
         /**
-         * TODO: Also add `Vary` headers for `accept-language` and any other keys
-         * we want to shard our full-page cache for all Hydrogen storefronts.
+         * Stream back real-user responses, but for bots/etc,
+         * use `render` instead. This is because we need to inject <head>
+         * things for SEO reasons.
          */
-        headers[getCacheControlHeader({ dev })] =
-            componentResponse.cacheControlHeader;
-        if (componentResponse.customBody) {
-            // This can be used to return sitemap.xml or any other custom response.
-            logServerResponse('ssr', log, request, status);
-            return new Response(await componentResponse.customBody, {
-                status,
-                statusText,
-                headers,
-            });
+        if (isStreamable) {
+            return stream(url, params);
         }
-        headers['Content-type'] = HTML_CONTENT_TYPE;
-        const { bodyAttributes, htmlAttributes, ...head } = extractHeadElements(request.ctx.helmet);
-        html = html
-            .replace(/<head>(.*?)<\/head>/s, generateHeadTag(head))
-            .replace('<html', htmlAttributes ? `<html ${htmlAttributes}` : '$&')
-            .replace('<body', bodyAttributes ? `<body ${bodyAttributes}` : '$&')
-            .replace('</body>', flight
-            ? `${flightContainer({ init: true, nonce, chunk: flight })}</body>`
-            : '$&');
-        logServerResponse('ssr', log, request, status);
-        return new Response(html, {
-            status,
-            statusText,
-            headers,
-        });
+        return render(url, params);
     };
+    return handleRequest;
+};
+function getApiRoute(url, { pages }) {
+    const routes = getApiRoutesFromPages(pages);
+    return getApiRouteFromURL(url, routes);
+}
+/**
+ * The render function is responsible for turning the provided `App` into an HTML string,
+ * and returning any initial state that needs to be hydrated into the client version of the app.
+ * NOTE: This is currently only used for SEO bots or Worker runtime (where Stream is not yet supported).
+ */
+async function render(url, { App, pages, request, componentResponse, log, template, nonce, dev, }) {
+    const state = { pathname: url.pathname, search: url.search };
+    const { AppSSR, rscReadable } = buildAppSSR({
+        App,
+        state,
+        request,
+        response: componentResponse,
+        pages,
+        log,
+    }, { template });
+    let [html, flight] = await Promise.all([
+        renderToBufferedString(AppSSR, { log, nonce }),
+        bufferReadableStream(rscReadable.getReader()),
+    ]);
+    const { headers, status, statusText } = getResponseOptions(componentResponse);
     /**
-     * Stream a response to the client. NOTE: This omits custom `<head>`
-     * information, so this method should not be used by crawlers.
+     * TODO: Also add `Vary` headers for `accept-language` and any other keys
+     * we want to shard our full-page cache for all Hydrogen storefronts.
      */
-    const stream = async function (url, { request, response, template, nonce, dev }) {
-        const { log, state, componentResponse } = setupCurrentRequest(url, request);
-        log.trace('start stream');
-        const { AppSSR, rscReadable } = buildAppSSR({
-            App,
-            state,
-            request,
-            response: componentResponse,
-            log,
-            pages,
-        }, {
-            template,
-            htmlAttrs: { lang: 'en' },
-        });
-        const rscToScriptTagReadable = new ReadableStream({
-            start(controller) {
-                log.trace('rsc start chunks');
-                let init = true;
-                const encoder = new TextEncoder();
-                bufferReadableStream(rscReadable.getReader(), (chunk) => {
-                    const scriptTag = flightContainer({ init, chunk, nonce });
-                    controller.enqueue(encoder.encode(scriptTag));
-                    init = false;
-                }).then(() => {
-                    log.trace('rsc finish chunks');
-                    return controller.close();
-                });
-            },
+    headers[getCacheControlHeader({ dev })] = componentResponse.cacheControlHeader;
+    if (componentResponse.customBody) {
+        // This can be used to return sitemap.xml or any other custom response.
+        postRequestTasks('ssr', status, request, componentResponse);
+        return new Response(await componentResponse.customBody, {
+            status,
+            statusText,
+            headers,
         });
-        let didError;
-        if (__WORKER__) {
-            const deferredShouldReturnApp = defer();
+    }
+    headers['Content-type'] = HTML_CONTENT_TYPE;
+    const { bodyAttributes, htmlAttributes, ...head } = extractHeadElements(request.ctx.head);
+    html = html
+        .replace(/<head>(.*?)<\/head>/s, generateHeadTag(head))
+        .replace('<html', htmlAttributes ? `<html ${htmlAttributes}` : '$&')
+        .replace('<body', bodyAttributes ? `<body ${bodyAttributes}` : '$&')
+        .replace('</body>', flight
+        ? `${flightContainer({ init: true, nonce, chunk: flight })}</body>`
+        : '$&');
+    postRequestTasks('ssr', status, request, componentResponse);
+    return new Response(html, {
+        status,
+        statusText,
+        headers,
+    });
+}
+/**
+ * Stream a response to the client. NOTE: This omits custom `<head>`
+ * information, so this method should not be used by crawlers.
+ */
+async function stream(url, { App, pages, request, response, componentResponse, log, template, nonce, dev, }) {
+    const state = { pathname: url.pathname, search: url.search };
+    log.trace('start stream');
+    const { noScriptTemplate, bootstrapScripts, bootstrapModules } = stripScriptsFromTemplate(template);
+    const { AppSSR, rscReadable } = buildAppSSR({
+        App,
+        state,
+        request,
+        response: componentResponse,
+        log,
+        pages,
+    }, {
+        template: noScriptTemplate,
+        htmlAttrs: { lang: 'en' },
+    });
+    const rscToScriptTagReadable = new ReadableStream({
+        start(controller) {
+            log.trace('rsc start chunks');
+            let init = true;
             const encoder = new TextEncoder();
-            const transform = new TransformStream();
-            const writable = transform.writable.getWriter();
-            const responseOptions = {};
-            const ssrReadable = ssrRenderToReadableStream(AppSSR, {
-                nonce,
-                onCompleteShell() {
-                    log.trace('worker ready to stream');
-                    Object.assign(responseOptions, getResponseOptions(componentResponse, didError));
-                    /**
-                     * TODO: This assumes `response.cache()` has been called _before_ any
-                     * queries which might be caught behind Suspense. Clarify this or add
-                     * additional checks downstream?
-                     */
-                    responseOptions.headers[getCacheControlHeader({ dev })] =
-                        componentResponse.cacheControlHeader;
-                    if (isRedirect(responseOptions)) {
-                        // Return redirects early without further rendering/streaming
-                        return deferredShouldReturnApp.resolve(false);
-                    }
-                    if (!componentResponse.canStream())
-                        return;
-                    startWritingHtmlToStream(responseOptions, writable, encoder, dev ? didError : undefined);
-                    deferredShouldReturnApp.resolve(true);
-                },
-                async onCompleteAll() {
-                    log.trace('worker complete stream');
-                    if (componentResponse.canStream())
-                        return;
-                    Object.assign(responseOptions, getResponseOptions(componentResponse, didError));
-                    if (isRedirect(responseOptions)) {
-                        // Redirects found after any async code
-                        return deferredShouldReturnApp.resolve(false);
-                    }
-                    if (componentResponse.customBody) {
-                        writable.write(encoder.encode(await componentResponse.customBody));
-                        return deferredShouldReturnApp.resolve(false);
-                    }
-                    startWritingHtmlToStream(responseOptions, writable, encoder, dev ? didError : undefined);
-                    deferredShouldReturnApp.resolve(true);
-                },
-                onError(error) {
-                    didError = error;
-                    if (dev && deferredShouldReturnApp.status === 'pending') {
-                        writable.write(getErrorMarkup(error));
-                    }
-                    console.error(error);
-                },
+            bufferReadableStream(rscReadable.getReader(), (chunk) => {
+                const scriptTag = flightContainer({ init, chunk, nonce });
+                controller.enqueue(encoder.encode(scriptTag));
+                init = false;
+            }).then(() => {
+                log.trace('rsc finish chunks');
+                return controller.close();
             });
-            if (await deferredShouldReturnApp.promise) {
-                let bufferedSsr = '';
-                let isPendingSsrWrite = false;
-                const writingSSR = bufferReadableStream(ssrReadable.getReader(), (chunk) => {
-                    bufferedSsr += chunk;
-                    if (!isPendingSsrWrite) {
-                        isPendingSsrWrite = true;
-                        setTimeout(() => {
-                            isPendingSsrWrite = false;
-                            // React can write fractional chunks synchronously.
-                            // This timeout ensures we only write full HTML tags
-                            // in order to allow RSC writing concurrently.
-                            if (bufferedSsr) {
-                                writable.write(encoder.encode(bufferedSsr));
-                                bufferedSsr = '';
-                            }
-                        }, 0);
-                    }
-                });
-                const writingRSC = bufferReadableStream(rscToScriptTagReadable.getReader(), (scriptTag) => writable.write(encoder.encode(scriptTag)));
-                Promise.all([writingSSR, writingRSC]).then(() => {
-                    // Last SSR write might be pending, delay closing the writable one tick
-                    setTimeout(() => writable.close(), 0);
-                    logServerResponse('str', log, request, responseOptions.status);
-                });
-            }
-            else {
-                writable.close();
-                logServerResponse('str', log, request, responseOptions.status);
-            }
-            if (await isStreamingSupported()) {
-                return new Response(transform.readable, responseOptions);
-            }
-            const bufferedBody = await bufferReadableStream(transform.readable.getReader());
-            return new Response(bufferedBody, responseOptions);
-        }
-        else if (response) {
-            response.socket.on('error', log.fatal);
-            const { pipe } = ssrRenderToPipeableStream(AppSSR, {
-                nonce,
-                onCompleteShell() {
-                    log.trace('node ready to stream');
-                    /**
-                     * TODO: This assumes `response.cache()` has been called _before_ any
-                     * queries which might be caught behind Suspense. Clarify this or add
-                     * additional checks downstream?
-                     */
-                    response.setHeader(getCacheControlHeader({ dev }), componentResponse.cacheControlHeader);
-                    writeHeadToServerResponse(response, componentResponse, log, didError);
-                    logServerResponse('str', log, request, response.statusCode);
-                    if (isRedirect(response)) {
-                        // Return redirects early without further rendering/streaming
-                        return response.end();
-                    }
-                    if (!componentResponse.canStream())
-                        return;
-                    startWritingHtmlToServerResponse(response, dev ? didError : undefined);
+        },
+    });
+    let didError;
+    if (__WORKER__) {
+        const deferredShouldReturnApp = defer();
+        const encoder = new TextEncoder();
+        const transform = new TransformStream();
+        const writable = transform.writable.getWriter();
+        const responseOptions = {};
+        const ssrReadable = ssrRenderToReadableStream(AppSSR, {
+            nonce,
+            bootstrapScripts,
+            bootstrapModules,
+            onCompleteShell() {
+                log.trace('worker ready to stream');
+                Object.assign(responseOptions, getResponseOptions(componentResponse, didError));
+                /**
+                 * TODO: This assumes `response.cache()` has been called _before_ any
+                 * queries which might be caught behind Suspense. Clarify this or add
+                 * additional checks downstream?
+                 */
+                responseOptions.headers[getCacheControlHeader({ dev })] =
+                    componentResponse.cacheControlHeader;
+                if (isRedirect(responseOptions)) {
+                    // Return redirects early without further rendering/streaming
+                    return deferredShouldReturnApp.resolve(false);
+                }
+                if (!componentResponse.canStream())
+                    return;
+                startWritingHtmlToStream(responseOptions, writable, encoder, dev ? didError : undefined);
+                deferredShouldReturnApp.resolve(true);
+            },
+            async onCompleteAll() {
+                log.trace('worker complete stream');
+                if (componentResponse.canStream())
+                    return;
+                Object.assign(responseOptions, getResponseOptions(componentResponse, didError));
+                if (isRedirect(responseOptions)) {
+                    // Redirects found after any async code
+                    return deferredShouldReturnApp.resolve(false);
+                }
+                if (componentResponse.customBody) {
+                    writable.write(encoder.encode(await componentResponse.customBody));
+                    return deferredShouldReturnApp.resolve(false);
+                }
+                startWritingHtmlToStream(responseOptions, writable, encoder, dev ? didError : undefined);
+                deferredShouldReturnApp.resolve(true);
+            },
+            onError(error) {
+                didError = error;
+                if (dev && deferredShouldReturnApp.status === 'pending') {
+                    writable.write(getErrorMarkup(error));
+                }
+                log.error(error);
+            },
+        });
+        if (await deferredShouldReturnApp.promise) {
+            let bufferedSsr = '';
+            let isPendingSsrWrite = false;
+            const writingSSR = bufferReadableStream(ssrReadable.getReader(), (chunk) => {
+                bufferedSsr += chunk;
+                if (!isPendingSsrWrite) {
+                    isPendingSsrWrite = true;
                     setTimeout(() => {
-                        log.trace('node pipe response');
-                        pipe(response);
+                        isPendingSsrWrite = false;
+                        // React can write fractional chunks synchronously.
+                        // This timeout ensures we only write full HTML tags
+                        // in order to allow RSC writing concurrently.
+                        if (bufferedSsr) {
+                            writable.write(encoder.encode(bufferedSsr));
+                            bufferedSsr = '';
+                        }
                     }, 0);
-                    bufferReadableStream(rscToScriptTagReadable.getReader(), (chunk) => {
-                        log.trace('rsc chunk');
-                        return response.write(chunk);
-                    });
-                },
-                async onCompleteAll() {
-                    log.trace('node complete stream');
-                    clearTimeout(streamTimeout);
-                    if (componentResponse.canStream() || response.writableEnded)
-                        return;
-                    writeHeadToServerResponse(response, componentResponse, log, didError);
-                    logServerResponse('str', log, request, response.statusCode);
-                    if (isRedirect(response)) {
-                        // Redirects found after any async code
-                        return response.end();
-                    }
-                    if (componentResponse.customBody) {
-                        return response.end(await componentResponse.customBody);
-                    }
-                    startWritingHtmlToServerResponse(response, dev ? didError : undefined);
-                    bufferReadableStream(rscToScriptTagReadable.getReader()).then((scriptTags) => {
-                        // Piping ends the response so script tags
-                        // must be written before that.
-                        response.write(scriptTags);
-                        pipe(response);
-                    });
-                },
-                onError(error) {
-                    didError = error;
-                    if (dev && response.headersSent) {
-                        // Calling write would flush headers automatically.
-                        // Delay this error until headers are properly sent.
-                        response.write(getErrorMarkup(error));
-                    }
-                    log.error(error);
-                },
+                }
+            });
+            const writingRSC = bufferReadableStream(rscToScriptTagReadable.getReader(), (scriptTag) => writable.write(encoder.encode(scriptTag)));
+            Promise.all([writingSSR, writingRSC]).then(() => {
+                // Last SSR write might be pending, delay closing the writable one tick
+                setTimeout(() => writable.close(), 0);
+                postRequestTasks('str', responseOptions.status, request, componentResponse);
             });
-            const streamTimeout = setTimeout(() => {
-                log.warn(`The app failed to stream after ${STREAM_ABORT_TIMEOUT_MS} ms`);
-            }, STREAM_ABORT_TIMEOUT_MS);
         }
-    };
-    /**
-     * Stream a hydration response to the client.
-     */
-    const hydrate = async function (url, { request, response, isStreamable }) {
-        const { log, state, componentResponse } = setupCurrentRequest(url, request);
-        const { AppRSC } = buildAppRSC({
-            App,
-            state,
-            request,
-            response: componentResponse,
-            log,
-            pages,
-        });
-        if (__WORKER__) {
-            const rscReadable = rscRenderToReadableStream(AppRSC);
-            if (isStreamable && (await isStreamingSupported())) {
-                logServerResponse('rsc', log, request, 200);
-                return new Response(rscReadable);
-            }
-            // Note: CFW does not support reader.piteTo nor iterable syntax
-            const bufferedBody = await bufferReadableStream(rscReadable.getReader());
-            logServerResponse('rsc', log, request, 200);
-            return new Response(bufferedBody);
+        else {
+            writable.close();
+            postRequestTasks('str', responseOptions.status, request, componentResponse);
         }
-        else if (response) {
-            response.socket.on('error', log.fatal);
-            const rscWriter = await import(
-            // @ts-ignore
-            '@shopify/hydrogen/vendor/react-server-dom-vite/writer.node.server');
-            const stream = rscWriter
-                .renderToPipeableStream(AppRSC)
-                .pipe(response);
-            stream.on('finish', function () {
-                logServerResponse('rsc', log, request, response.statusCode);
-            });
+        if (await isStreamingSupported()) {
+            return new Response(transform.readable, responseOptions);
         }
-    };
-    function getApiRoute(url) {
-        const routes = getApiRoutesFromPages(pages);
-        return getApiRouteFromURL(url, routes);
+        const bufferedBody = await bufferReadableStream(transform.readable.getReader());
+        return new Response(bufferedBody, responseOptions);
     }
-    return {
-        render,
-        stream,
-        hydrate,
-        getApiRoute,
-        log: noContextLogger,
-    };
-};
-async function bufferReadableStream(reader, cb) {
-    const decoder = new TextDecoder();
-    let result = '';
-    while (true) {
-        const { done, value } = await reader.read();
-        if (done)
-            break;
-        const stringValue = typeof value === 'string' ? value : decoder.decode(value);
-        result += stringValue;
-        if (cb) {
-            cb(stringValue);
+    else if (response) {
+        response.socket.on('error', log.fatal);
+        const { pipe } = ssrRenderToPipeableStream(AppSSR, {
+            nonce,
+            bootstrapScripts,
+            bootstrapModules,
+            onCompleteShell() {
+                log.trace('node ready to stream');
+                /**
+                 * TODO: This assumes `response.cache()` has been called _before_ any
+                 * queries which might be caught behind Suspense. Clarify this or add
+                 * additional checks downstream?
+                 */
+                response.setHeader(getCacheControlHeader({ dev }), componentResponse.cacheControlHeader);
+                writeHeadToServerResponse(response, componentResponse, log, didError);
+                logServerResponse('str', request, response.statusCode);
+                if (isRedirect(response)) {
+                    // Return redirects early without further rendering/streaming
+                    return response.end();
+                }
+                if (!componentResponse.canStream())
+                    return;
+                startWritingHtmlToServerResponse(response, dev ? didError : undefined);
+                setTimeout(() => {
+                    log.trace('node pipe response');
+                    pipe(response);
+                }, 0);
+                bufferReadableStream(rscToScriptTagReadable.getReader(), (chunk) => {
+                    log.trace('rsc chunk');
+                    return response.write(chunk);
+                });
+            },
+            async onCompleteAll() {
+                log.trace('node complete stream');
+                if (componentResponse.canStream() || response.writableEnded) {
+                    postRequestTasks('str', response.statusCode, request, componentResponse);
+                    return;
+                }
+                writeHeadToServerResponse(response, componentResponse, log, didError);
+                postRequestTasks('str', response.statusCode, request, componentResponse);
+                if (isRedirect(response)) {
+                    // Redirects found after any async code
+                    return response.end();
+                }
+                if (componentResponse.customBody) {
+                    return response.end(await componentResponse.customBody);
+                }
+                startWritingHtmlToServerResponse(response, dev ? didError : undefined);
+                bufferReadableStream(rscToScriptTagReadable.getReader()).then((scriptTags) => {
+                    // Piping ends the response so script tags
+                    // must be written before that.
+                    response.write(scriptTags);
+                    pipe(response);
+                });
+            },
+            onError(error) {
+                didError = error;
+                if (dev && response.headersSent) {
+                    // Calling write would flush headers automatically.
+                    // Delay this error until headers are properly sent.
+                    response.write(getErrorMarkup(error));
+                }
+                log.error(error);
+            },
+        });
+    }
+}
+/**
+ * Stream a hydration response to the client.
+ */
+async function hydrate(url, { App, pages, request, response, componentResponse, isStreamable, log, }) {
+    const state = JSON.parse(url.searchParams.get('state') || '{}');
+    const { AppRSC } = buildAppRSC({
+        App,
+        state,
+        request,
+        response: componentResponse,
+        log,
+        pages,
+    });
+    if (__WORKER__) {
+        const rscReadable = rscRenderToReadableStream(AppRSC);
+        if (isStreamable && (await isStreamingSupported())) {
+            postRequestTasks('rsc', 200, request, componentResponse);
+            return new Response(rscReadable);
         }
+        // Note: CFW does not support reader.piteTo nor iterable syntax
+        const bufferedBody = await bufferReadableStream(rscReadable.getReader());
+        postRequestTasks('rsc', 200, request, componentResponse);
+        return new Response(bufferedBody);
+    }
+    else if (response) {
+        response.socket.on('error', log.fatal);
+        const rscWriter = await import(
+        // @ts-ignore
+        '@shopify/hydrogen/vendor/react-server-dom-vite/writer.node.server');
+        const stream = rscWriter
+            .renderToPipeableStream(AppRSC)
+            .pipe(response);
+        stream.on('finish', function () {
+            postRequestTasks('rsc', response.statusCode, request, componentResponse);
+        });
     }
-    return result;
 }
 function buildAppRSC({ App, state, request, response, log, pages, }) {
     const hydrogenServerProps = { request, response, log };
     const AppRSC = (React.createElement(ServerRequestProvider, { request: request, isRSC: true },
-        React.createElement(App, { ...state, ...hydrogenServerProps, pages: pages })));
+        React.createElement(PreloadQueries, { request: request },
+            React.createElement(App, { ...state, ...hydrogenServerProps, pages: pages }))));
     return { AppRSC };
 }
 function buildAppSSR({ App, state, request, response, log, pages }, htmlOptions) {
@@ -342,10 +377,16 @@ function buildAppSSR({ App, state, request, response, log, pages }, htmlOptions)
     const AppSSR = (React.createElement(Html, { ...htmlOptions },
         React.createElement(ServerRequestProvider, { request: request, isRSC: false },
             React.createElement(ServerStateProvider, { serverState: state, setServerState: () => { } },
-                React.createElement(React.Suspense, { fallback: null },
-                    React.createElement(RscConsumer, null))))));
+                React.createElement(PreloadQueries, { request: request },
+                    React.createElement(React.Suspense, { fallback: null },
+                        React.createElement(RscConsumer, null)))))));
     return { AppSSR, rscReadable: rscReadableForFlight };
 }
+function PreloadQueries({ request, children, }) {
+    const preloadQueries = request.getPreloadQueries();
+    preloadRequestCacheData(request, preloadQueries);
+    return children;
+}
 function extractHeadElements({ context: { helmet } }) {
     return helmet
         ? {
@@ -363,15 +404,11 @@ function extractHeadElements({ context: { helmet } }) {
 }
 async function renderToBufferedString(ReactApp, { log, nonce }) {
     return new Promise(async (resolve, reject) => {
-        const errorTimeout = setTimeout(() => {
-            log.warn(`The app failed to SSR after ${STREAM_ABORT_TIMEOUT_MS} ms`);
-        }, STREAM_ABORT_TIMEOUT_MS);
         if (__WORKER__) {
             const deferred = defer();
             const readable = ssrRenderToReadableStream(ReactApp, {
                 nonce,
                 onCompleteAll() {
-                    clearTimeout(errorTimeout);
                     /**
                      * We want to wait until `onCompleteAll` has been called before fetching the
                      * stream body. Otherwise, React 18's streaming JS script/template tags
@@ -397,7 +434,6 @@ async function renderToBufferedString(ReactApp, { log, nonce }) {
                  * `template` and `script` tags inserted and rendered as part of the hydration response.
                  */
                 onCompleteAll() {
-                    clearTimeout(errorTimeout);
                     let data = '';
                     writer.on('data', (chunk) => (data += chunk.toString()));
                     writer.once('error', reject);
@@ -502,36 +538,18 @@ function flightContainer({ init, chunk, nonce, }) {
         script += 'var __flight=[];';
     }
     if (chunk) {
-        const normalizedChunk = chunk === null || chunk === void 0 ? void 0 : chunk.replace(/\\/g, String.raw `\\`);
+        const normalizedChunk = chunk
+            // 1. Duplicate the escape char (\) for already escaped characters (e.g. \n or \").
+            .replace(/\\/g, String.raw `\\`)
+            // 2. Escape existing backticks to allow wrapping the whole thing in `...`.
+            .replace(/`/g, String.raw `\``);
         script += `__flight.push(\`${normalizedChunk}\`)`;
     }
     return script + '</script>';
 }
-let cachedStreamingSupport;
-async function isStreamingSupported() {
-    if (cachedStreamingSupport === undefined) {
-        try {
-            const rs = new ReadableStream({
-                start(controller) {
-                    controller.close();
-                },
-            });
-            // This will throw in CFW until streaming
-            // is supported. It works in Miniflare.
-            await new Response(rs).text();
-            cachedStreamingSupport = true;
-        }
-        catch (_) {
-            cachedStreamingSupport = false;
-        }
-    }
-    return cachedStreamingSupport;
-}
-function setupCurrentRequest(url, request) {
-    const log = getLoggerFromContext(request);
-    const state = url.pathname === RSC_PATHNAME
-        ? JSON.parse(url.searchParams.get('state') || '{}')
-        : { pathname: url.pathname, search: url.search };
-    const componentResponse = new ServerComponentResponse();
-    return { log, state, componentResponse };
+function postRequestTasks(type, status, request, componentResponse) {
+    logServerResponse(type, request, status);
+    logCacheControlHeaders(type, request, componentResponse);
+    logQueryTimings(type, request);
+    request.savePreloadQueries();
 }