diff --git a/packages/next/client/components/app-router.client.tsx b/packages/next/client/components/app-router.client.tsx index 5136d5faa20d700..e2950f45588eab4 100644 --- a/packages/next/client/components/app-router.client.tsx +++ b/packages/next/client/components/app-router.client.tsx @@ -2,7 +2,7 @@ import type { PropsWithChildren, ReactElement, ReactNode } from 'react' import React, { useEffect, useMemo, useCallback } from 'react' -import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack' +import { createFromFetch } from 'next/dist/compiled/react-server-dom-webpack' import { AppRouterContext, LayoutRouterContext, @@ -32,11 +32,11 @@ import { useReducerWithReduxDevtools } from './use-reducer-with-devtools' /** * Fetch the flight data for the provided url. Takes in the current router state to decide what to render server-side. */ -function fetchFlight( +export function fetchServerResponse( url: URL, flightRouterState: FlightRouterState, prefetch?: true -): ReadableStream { +): Promise { const flightUrl = new URL(url) const searchParams = flightUrl.searchParams // Enable flight response @@ -50,26 +50,9 @@ function fetchFlight( searchParams.append('__flight_prefetch__', '1') } - // TODO-APP: Verify that TransformStream is supported. - const { readable, writable } = new TransformStream() - - fetch(flightUrl.toString()).then((res) => { - res.body?.pipeTo(writable) - }) - - return readable -} - -/** - * Fetch the flight data for the provided url. Takes in the current router state to decide what to render server-side. - */ -export function fetchServerResponse( - url: URL, - flightRouterState: FlightRouterState, - prefetch?: true -): Promise { + const promise = fetch(flightUrl.toString()) // Handle the `fetch` readable stream that can be unwrapped by `React.use`. - return createFromReadableStream(fetchFlight(url, flightRouterState, prefetch)) + return createFromFetch(promise) } /**