Interactivity Router: fix back and forward navigation after refresh

packages/e2e-tests/plugins/interactive-blocks/router-regions/view.js

@@ -31,9 +31,10 @@ const { state } = store( 'router-regions', {
 				);
 				yield actions.navigate( e.target.href );
 			} ),
-			back() {
+			back: withSyncEvent( function* ( e ) {
+				e.preventDefault();
 				history.back();
-			},
+			} ),
 		},
 		counter: {
 			increment() {

packages/interactivity-router/src/index.ts

@@ -25,6 +25,7 @@ const {
 	routerRegions,
 	h: createElement,
 	navigationSignal,
+	sessionId,
 	warn,
 } = privateApis(
 	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
@@ -515,7 +516,7 @@ export const { state, actions } = store< Store >( 'core/router', {
 
 				window.history[
 					options.replace ? 'replaceState' : 'pushState'
-				]( {}, '', href );
+				]( { wpInteractivityId: sessionId }, '', href );
 
 				if ( screenReaderAnnouncement ) {
 					a11ySpeak( 'loaded' );

packages/interactivity/src/index.ts

@@ -22,7 +22,13 @@ import { directive } from './hooks';
 import { getNamespace } from './namespaces';
 import { parseServerData, populateServerData } from './store';
 import { proxifyState } from './proxies';
-import { deepReadOnly, navigationSignal, onDOMReady, warn } from './utils';
+import {
+	deepReadOnly,
+	navigationSignal,
+	onDOMReady,
+	sessionId,
+	warn,
+} from './utils';
 
 export {
 	store,
@@ -86,6 +92,7 @@ export const privateApis = (
 			routerRegions,
 			deepReadOnly,
 			navigationSignal,
+			sessionId,
 			warn,
 		};
 	}
@@ -105,3 +112,21 @@ registerDirectives();
 // asynchronous modules, or modules importing this module asynchronously, this
 // cannot be guaranteed.
 onDOMReady( hydrateRegions );
+
+// Tag the current history entry with the session ID so that, within the same
+// session, all entries share the same ID and back/forward works normally.
+window.history.replaceState(
+	{ ...window.history.state, wpInteractivityId: sessionId },
+	''
+);
+
+// When the browser fires `popstate` for a history entry that was created in a
+// different session (i.e., before a full page reload), force a reload so the
+// server can render the correct content. Without this, the URL would change but
+// the page content would remain stale because the interactivity router — which
+// handles client-side navigations — might not be loaded yet.
+window.addEventListener( 'popstate', ( event ) => {
+	if ( event.state?.wpInteractivityId !== sessionId ) {
+		window.location.reload();
+	}
+} );

packages/interactivity/src/utils.ts

@@ -507,6 +507,15 @@ export function deepReadOnly< T extends object >(
 
 export const navigationSignal = signal( 0 );
 
+/**
+ * Unique identifier for the current browser session of the interactivity
+ * runtime. Generated once when the module is first evaluated. Used by the
+ * router to tag history entries so that, after a full page reload, popstate
+ * events for entries created in a previous session trigger a full reload
+ * instead of a client-side navigation that would leave stale content.
+ */
+export const sessionId = crypto.randomUUID();
+
 /**
  * Recursively clones the passed object.
  *

test/e2e/specs/interactivity/router-regions.spec.ts

@@ -709,4 +709,30 @@ test.describe( 'Router regions', () => {
 			await expect( clientCounter ).toHaveText( '13' );
 		}
 	} );
+
+	// Regression test for https://github.com/WordPress/gutenberg/issues/70500.
+	test( 'should update content on back/forward navigation after a page reload', async ( {
+		page,
+	} ) => {
+		const region1Ssr = page.getByTestId( 'region-1-ssr' );
+
+		// Start on page 1.
+		await expect( region1Ssr ).toHaveText( 'content from page 1' );
+
+		// Client-side navigate to page 2.
+		await page.getByTestId( 'next' ).click();
+		await expect( region1Ssr ).toHaveText( 'content from page 2' );
+
+		// Reload the page.
+		await page.reload();
+		await expect( region1Ssr ).toHaveText( 'content from page 2' );
+
+		// Go back: content should update to page 1.
+		await page.goBack();
+		await expect( region1Ssr ).toHaveText( 'content from page 1' );
+
+		// Go forward: content should update back to page 2.
+		await page.goForward();
+		await expect( region1Ssr ).toHaveText( 'content from page 2' );
+	} );
 } );