Use createFromFetch instead of createFromReadableStream to fetch Flig…

…ht (#40656)

Small change leveraging the `createFromFetch` method instead.


## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)

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<FlightData> {
   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<FlightData> {
+  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)
 }
 
 /**