diff --git a/packages/next/client/components/app-router.client.tsx b/packages/next/client/components/app-router.client.tsx index a317f35455f1f..42dff765f5e45 100644 --- a/packages/next/client/components/app-router.client.tsx +++ b/packages/next/client/components/app-router.client.tsx @@ -65,6 +65,14 @@ export async function fetchServerResponse( ? urlToUrlWithoutFlightMarker(res.url) : undefined + const isFlightResponse = + res.headers.get('content-type') === 'application/octet-stream' + + // If fetch returns something different than flight response handle it like a mpa navigation + if (!isFlightResponse) { + return [res.url, undefined] + } + // Handle the `fetch` readable stream that can be unwrapped by `React.use`. const flightData: FlightData = await createFromFetch(Promise.resolve(res)) return [flightData, canonicalUrl] diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts index b9cef55ae8370..eaadc3edb31d3 100644 --- a/packages/next/export/worker.ts +++ b/packages/next/export/worker.ts @@ -407,7 +407,6 @@ export default async function exportPage({ page, query, curRenderOpts as any, - false, true ) const html = result?.toUnchunkedString() diff --git a/packages/next/server/app-render.tsx b/packages/next/server/app-render.tsx index 2436ca35da9da..d715a6b5353f2 100644 --- a/packages/next/server/app-render.tsx +++ b/packages/next/server/app-render.tsx @@ -6,7 +6,7 @@ import type { ServerRuntime } from '../types' // @ts-ignore import React, { experimental_use as use } from 'react' -import { ParsedUrlQuery, stringify as stringifyQuery } from 'querystring' +import { ParsedUrlQuery } from 'querystring' import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack' import { NextParsedUrlQuery } from './request-meta' import RenderResult from './render-result' @@ -609,7 +609,6 @@ export async function renderToHTMLOrFlight( pathname: string, query: NextParsedUrlQuery, renderOpts: RenderOpts, - isPagesDir: boolean, isStaticGeneration: boolean = false ): Promise { const isFlight = req.headers.__rsc__ !== undefined @@ -638,32 +637,6 @@ export async function renderToHTMLOrFlight( ComponentMod, } = renderOpts - // Handle client-side navigation to pages directory - // This is handled before - if (isFlight && isPagesDir) { - stripInternalQueries(query) - const search = stringifyQuery(query) - - // For pages dir, there is only the SSR pass and we don't have the bundled - // React subset. Here we directly import the flight renderer with the - // unbundled React. - // TODO-APP: Is it possible to hard code the flight response here instead of - // rendering it? - const ReactServerDOMWebpack = require('next/dist/compiled/react-server-dom-webpack/writer.browser.server') - - // Empty so that the client-side router will do a full page navigation. - const flightData: FlightData = pathname + (search ? `?${search}` : '') - return new FlightRenderResult( - ReactServerDOMWebpack.renderToReadableStream( - flightData, - serverComponentManifest, - { - onError: flightDataRendererErrorHandler, - } - ).pipeThrough(createBufferedTransformStream()) - ) - } - patchFetch(ComponentMod) const staticGenerationAsyncStorage = ComponentMod.staticGenerationAsyncStorage diff --git a/packages/next/server/next-server.ts b/packages/next/server/next-server.ts index aad6254ece23c..09710999fabf6 100644 --- a/packages/next/server/next-server.ts +++ b/packages/next/server/next-server.ts @@ -826,18 +826,13 @@ export default class NextNodeServer extends BaseServer { renderOpts.serverCSSManifest = this.serverCSSManifest renderOpts.fontLoaderManifest = this.fontLoaderManifest - if ( - this.nextConfig.experimental.appDir && - (renderOpts.isAppPath || req.headers.__rsc__) - ) { - const isPagesDir = !renderOpts.isAppPath + if (this.nextConfig.experimental.appDir && renderOpts.isAppPath) { return appRenderToHTMLOrFlight( req.originalRequest, res.originalResponse, pathname, query, - renderOpts, - isPagesDir + renderOpts ) } diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts index 46dff5e1bfe19..777c3f111c154 100644 --- a/test/e2e/app-dir/index.test.ts +++ b/test/e2e/app-dir/index.test.ts @@ -524,18 +524,21 @@ describe('app dir', () => { } }) - // TODO-APP: should enable when implemented - it.skip('should allow linking from app page to pages page', async () => { + it('should allow linking from app page to pages page', async () => { const browser = await webdriver(next.url, '/pages-linking') try { // Click the link. await browser.elementById('app-link').click() - await browser.waitForElementByCss('#pages-link') + expect(await browser.waitForElementByCss('#pages-link').text()).toBe( + 'To App Page' + ) // Click the other link. await browser.elementById('pages-link').click() - await browser.waitForElementByCss('#app-link') + expect(await browser.waitForElementByCss('#app-link').text()).toBe( + 'To Pages Page' + ) } finally { await browser.close() }