enable routerBfCache behind cacheComponents

ztanner · ztanner · commit 307d4f864d1c · 2025-10-21T00:03:42.000-07:00
diff --git a/crates/next-core/src/next_config.rs b/crates/next-core/src/next_config.rs
@@ -856,8 +856,6 @@ pub struct ExperimentalConfig {
     /// directory.
     ppr: Option<ExperimentalPartialPrerendering>,
     taint: Option<bool>,
-    #[serde(rename = "routerBFCache")]
-    router_bfcache: Option<bool>,
     proxy_timeout: Option<f64>,
     /// enables the minification of server code.
     server_minification: Option<bool>,
diff --git a/packages/next/src/build/define-env.ts b/packages/next/src/build/define-env.ts
@@ -205,9 +205,6 @@ export function getDefineEnv({
     'process.env.__NEXT_DYNAMIC_ON_HOVER': Boolean(
       config.experimental.dynamicOnHover
     ),
-    'process.env.__NEXT_ROUTER_BF_CACHE': Boolean(
-      config.experimental.routerBFCache
-    ),
     'process.env.__NEXT_OPTIMISTIC_CLIENT_CACHE':
       config.experimental.optimisticClientCache ?? true,
     'process.env.__NEXT_MIDDLEWARE_PREFETCH':
diff --git a/packages/next/src/client/components/bfcache.ts b/packages/next/src/client/components/bfcache.ts
@@ -2,7 +2,7 @@ import type { FlightRouterState } from '../../shared/lib/app-router-types'
 import { useState } from 'react'
 
 // When the flag is disabled, only track the currently active tree
-const MAX_BF_CACHE_ENTRIES = process.env.__NEXT_ROUTER_BF_CACHE ? 3 : 1
+const MAX_BF_CACHE_ENTRIES = process.env.__NEXT_CACHE_COMPONENTS ? 3 : 1
 
 export type RouterBFCacheEntry = {
   tree: FlightRouterState
diff --git a/packages/next/src/client/components/layout-router.tsx b/packages/next/src/client/components/layout-router.tsx
@@ -728,7 +728,7 @@ export default function OuterLayoutRouter({
       )
     }
 
-    if (process.env.__NEXT_ROUTER_BF_CACHE) {
+    if (process.env.__NEXT_CACHE_COMPONENTS) {
       const boundaryName = getBoundaryNameForSuspenseDevTools(tree)
       child = (
         <Activity
diff --git a/packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts b/packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts
@@ -423,6 +423,11 @@ export function serverActionReducer(
             redirectType || RedirectType.push
           )
         )
+
+        // TODO: Investigate why this is needed with Activity.
+        if (process.env.__NEXT_CACHE_COMPONENTS) {
+          return state
+        }
       } else {
         resolve(actionResult)
       }
diff --git a/packages/next/src/server/config-schema.ts b/packages/next/src/server/config-schema.ts
@@ -249,7 +249,6 @@ export const experimentalSchema = {
   rootParams: z.boolean().optional(),
   isolatedDevBuild: z.boolean().optional(),
   mcpServer: z.boolean().optional(),
-  routerBFCache: z.boolean().optional(),
   removeUncaughtErrorAndRejectionListeners: z.boolean().optional(),
   validateRSCRequestHeaders: z.boolean().optional(),
   scrollRestoration: z.boolean().optional(),
diff --git a/packages/next/src/server/config-shared.ts b/packages/next/src/server/config-shared.ts
@@ -591,11 +591,6 @@ export interface ExperimentalConfig {
    */
   taint?: boolean
 
-  /**
-   * Enables the Back/Forward Cache for the router.
-   */
-  routerBFCache?: boolean
-
   /**
    * Uninstalls all "unhandledRejection" and "uncaughtException" listeners from
    * the global process so that we can override the behavior, which in some
@@ -1517,7 +1512,6 @@ export const defaultConfig = Object.freeze({
     webpackMemoryOptimizations: false,
     optimizeServerReact: true,
     viewTransition: false,
-    routerBFCache: false,
     removeUncaughtErrorAndRejectionListeners: false,
     validateRSCRequestHeaders: !!(
       process.env.__NEXT_TEST_MODE || !isStableBuild()
diff --git a/test/e2e/app-dir/app-basepath/index.test.ts b/test/e2e/app-dir/app-basepath/index.test.ts
@@ -140,7 +140,8 @@ describe('app dir - basepath', () => {
       // This verifies the redirect & server response happens in a single roundtrip,
       // if the redirect resource was static. In development, these responses are always
       // dynamically generated, so we only expect a single request for build/deploy.
-      if (!isNextDev) {
+      // TODO(client-segment-cache): re-enable when this optimization is added back
+      if (!isNextDev && !process.env.__NEXT_CACHE_COMPONENTS) {
         expect(requests).toHaveLength(1)
         expect(responses).toHaveLength(1)
       }
diff --git a/test/e2e/app-dir/back-forward-cache/app/page/[n]/page.tsx b/test/e2e/app-dir/back-forward-cache/app/page/[n]/page.tsx
@@ -18,3 +18,7 @@ export default async function Page({
     </>
   )
 }
+
+export function generateStaticParams() {
+  return [{ n: '1' }, { n: '2' }]
+}
diff --git a/test/e2e/app-dir/back-forward-cache/next.config.js b/test/e2e/app-dir/back-forward-cache/next.config.js
@@ -2,9 +2,7 @@
  * @type {import('next').NextConfig}
  */
 const nextConfig = {
-  experimental: {
-    routerBFCache: true,
-  },
+  cacheComponents: true,
 }
 
 module.exports = nextConfig
diff --git a/test/e2e/app-dir/parallel-routes-css/parallel-routes-css.test.ts b/test/e2e/app-dir/parallel-routes-css/parallel-routes-css.test.ts
@@ -34,8 +34,11 @@ describe('parallel-routes-catchall-css', () => {
     // the slot's background color should be red
     expect(await getSlotBackgroundColor(browser)).toBe('rgb(255, 0, 0)')
 
-    // there should no longer be a main element
-    expect(await browser.hasElementByCssSelector('#main')).toBeFalsy()
+    // the main element should either not exist or not be visible
+    const mainDisplay = await browser.eval(
+      `document.querySelector('#main') ? window.getComputedStyle(document.querySelector('#main')).display : null`
+    )
+    expect(mainDisplay === null || mainDisplay === 'none').toBe(true)
 
     // the slot background should still be red on a fresh load
     await browser.refresh()
diff --git a/test/e2e/app-dir/resuming-head-runtime-search-param/app/layout.tsx b/test/e2e/app-dir/resuming-head-runtime-search-param/app/layout.tsx
@@ -5,7 +5,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        <div>{children}</div>
+      </body>
     </html>
   )
 }
diff --git a/test/e2e/app-dir/segment-cache/prefetch-runtime/prefetch-runtime.test.ts b/test/e2e/app-dir/segment-cache/prefetch-runtime/prefetch-runtime.test.ts
@@ -1,4 +1,5 @@
 import { nextTestSetup } from 'e2e-utils'
+import { waitFor } from 'next-test-utils'
 import type * as Playwright from 'playwright'
 import { createRouterAct } from 'router-act'
 
@@ -116,14 +117,6 @@ describe('runtime prefetching', () => {
 
       await browser.back()
 
-      // Reveal the link to the second page again. It should not be prefetched again
-      await act(async () => {
-        const linkToggle = await browser.elementByCss(
-          `input[data-link-accordion="/${prefix}/dynamic-params/456"]`
-        )
-        await linkToggle.click()
-      }, 'no-requests')
-
       // Navigate to the other page
       await act(async () => {
         await act(
@@ -233,14 +226,6 @@ describe('runtime prefetching', () => {
       if (!isNextDeploy) {
         await browser.back()
 
-        // Reveal the link to the second page again. It should not be prefetched again
-        await act(async () => {
-          const linkToggle = await browser.elementByCss(
-            `input[data-link-accordion="/with-root-param/de/${prefix}/root-params"]`
-          )
-          await linkToggle.click()
-        }, 'no-requests')
-
         // Navigate to the other page
         await act(async () => {
           await act(
@@ -348,14 +333,6 @@ describe('runtime prefetching', () => {
 
       await browser.back()
 
-      // Reveal the link to the second page again. It should not be prefetched again
-      await act(async () => {
-        const linkToggle = await browser.elementByCss(
-          `input[data-link-accordion="/${prefix}/search-params?searchParam=456"]`
-        )
-        await linkToggle.click()
-      }, 'no-requests')
-
       // Navigate to the other page
       await act(
         async () => {
@@ -495,23 +472,8 @@ describe('runtime prefetching', () => {
       // Go back to the previous page
       await browser.back()
 
-      // Reveal the link again to trigger a runtime prefetch for the new value of the cookie
-      await act(async () => {
-        const linkToggle = await browser.elementByCss(
-          `input[data-link-accordion="/${prefix}/cookies"]`
-        )
-        await linkToggle.click()
-      }, [
-        // Should allow reading dynamic params
-        {
-          includes: 'Cookie: updatedValue',
-        },
-        // Should not prefetch the dynamic content
-        {
-          includes: 'Dynamic content',
-          block: 'reject',
-        },
-      ])
+      // wait a tick before navigating
+      await waitFor(500)
 
       // Navigate to the page
       await act(async () => {
diff --git a/test/e2e/app-dir/segment-cache/staleness/segment-cache-stale-time.test.ts b/test/e2e/app-dir/segment-cache/staleness/segment-cache-stale-time.test.ts
@@ -187,10 +187,6 @@ describe('segment cache (staleness)', () => {
     await page.clock.setFixedTime(startDate + 29 * 1000)
 
     await act(async () => {
-      const toggle = await browser.elementByCss(
-        'input[data-link-accordion="/dynamic"]'
-      )
-      await toggle.click()
       const link = await browser.elementByCss('a[href="/dynamic"]')
       await link.click()
       // The next page is immediately rendered
@@ -207,10 +203,6 @@ describe('segment cache (staleness)', () => {
 
     await act(
       async () => {
-        const toggle = await browser.elementByCss(
-          'input[data-link-accordion="/dynamic"]'
-        )
-        await toggle.click()
         const link = await browser.elementByCss('a[href="/dynamic"]')
         await link.click()
       },
