fix bfcache restoration behavior (#54198)

Follow up to #54081 -- this was
restoring the router tree improperly causing an error on bfcache hits

Had to override some default behaviors to prevent `forward` / `back` in
playwright from hanging indefinitely since no load event is firing in
these cases

Fixes #54184
Closes NEXT-1528

packages/next/src/client/components/app-router.tsx

@@ -373,12 +373,12 @@ function Router({
     // would trigger the mpa navigation logic again from the lines below.
     // This will restore the router to the initial state in the event that the app is restored from bfcache.
     function handlePageShow(event: PageTransitionEvent) {
-      if (!event.persisted) return
+      if (!event.persisted || !window.history.state?.tree) return
 
       dispatch({
         type: ACTION_RESTORE,
         url: new URL(window.location.href),
-        tree: window.history.state,
+        tree: window.history.state.tree,
       })
     }
 

test/lib/browsers/base.ts

@@ -99,13 +99,13 @@ export abstract class BrowserInterface implements PromiseLike<any> {
   /**
    * Use browsers `go back` functionality.
    */
-  back(): BrowserInterface {
+  back(options?: any): BrowserInterface {
     return this
   }
   /**
    * Use browsers `go forward` functionality. Inverse of back.
    */
-  forward(): BrowserInterface {
+  forward(options?: any): BrowserInterface {
     return this
   }
   refresh(): BrowserInterface {

test/lib/browsers/playwright.ts

@@ -212,14 +212,14 @@ export class Playwright extends BrowserInterface {
     await page.goto(url, { waitUntil: 'load' })
   }
 
-  back(): BrowserInterface {
+  back(options): BrowserInterface {
     return this.chain(async () => {
-      await page.goBack()
+      await page.goBack(options)
     })
   }
-  forward(): BrowserInterface {
+  forward(options): BrowserInterface {
     return this.chain(async () => {
-      await page.goForward()
+      await page.goForward(options)
     })
   }
   refresh(): BrowserInterface {

test/production/export-routing/app/page.js → test/production/bfcache-routing/app/page.js

@@ -6,6 +6,7 @@ export default function Page() {
   const [counter, setCounter] = React.useState(0)
   return (
     <div>
+      <h1>BFCache Test</h1>
       <button onClick={() => setCounter((c) => c + 1)}>
         Trigger Re-Render
       </button>

test/production/export-routing/index.test.ts → test/production/bfcache-routing/index.test.ts

@@ -8,7 +8,7 @@ import {
 import webdriver from 'next-webdriver'
 import { join } from 'path'
 
-describe('export-routing', () => {
+describe('bfcache-routing', () => {
   let port: number
   let app: Server
 
@@ -35,20 +35,39 @@ describe('export-routing', () => {
 
     const browser = await webdriver(port, '/index.html', { headless: false })
 
+    // we overwrite the typical waitUntil: 'load' option here as the event is never being triggered if we hit the bfcache
+    const bfOptions = { waitUntil: 'commit' }
+
     await browser.elementByCss('a[href="https://example.vercel.sh"]').click()
     await browser.waitForCondition(
       'window.location.origin === "https://example.vercel.sh"'
     )
 
-    // this will never resolve in the failure case, as the page will be suspended indefinitely
-    await browser.back()
+    await browser.back(bfOptions)
+
+    await browser.waitForCondition(
+      'window.location.origin.includes("localhost")'
+    )
+
+    let html = await browser.evalAsync('document.documentElement.innerHTML')
 
-    expect(await browser.elementByCss('#counter').text()).toBe('0')
+    expect(html).toContain('BFCache Test')
 
-    // click the button
-    await browser.elementByCss('button').click()
+    await browser.evalAsync(`document.querySelector('button').click()`)
+
+    // we should still be on the test page
+    html = await browser.evalAsync('document.documentElement.innerHTML')
+    expect(html).toContain('BFCache Test')
+
+    await browser.forward(bfOptions)
+    await browser.back(bfOptions)
+
+    await browser.waitForCondition(
+      'window.location.origin.includes("localhost")'
+    )
 
-    // counter should be 1
-    expect(await browser.elementByCss('#counter').text()).toBe('1')
+    // we should be back on the test page with no errors
+    html = await browser.evalAsync('document.documentElement.innerHTML')
+    expect(html).toContain('BFCache Test')
   })
 })