Next.js: Back button with iframe on page

[ReinoutStevens]

Bug report

When having a page with an <iframe> with a dynamic src (ie based on a slug, eg /post/react, and /post/angular ) the back button navigates the iframe itself, and not the main application, even when the iframe is not in focus.
The behavior does not occur when the iframe does not have a src, or has a static src. The issue occurs both when the src points to the same application or to an external site.

To Reproduce

I have created a somewhat minimal repo: https://github.com/ReinoutStevens/nextjs-backbutton

The iframe and the main page should always show the same slug, but this is not the case. Press one of the links, press the back button and notice how the iframe navigates back, but not the main application.

Initial visit:

Click link:

Go back:

System information

• OS: Ubuntu
• Browser: Chrome Version 75.0.3770.80 (Official Build) (64-bit). Also occurs in Firefox
• Version of Next.js: 9.0.2 and latest

[ReinoutStevens]

This issue has been solved by placing key={url} on the iframe. Not 100% sure why or how this solves it, but the behavior is now the way we would expect it.

This issue can be closed for me.

[bhamme]

I'm seeing this same bug with a Calendly widget embedded via an iframe. It seems like there's some weird interplay between the calendly and next.js because I can not reproduce when I change my iframe to embed something like a giphy, but I also can't reproduce when I embed the calendly url on a static html page. So in isolation it doesn't necessarily seem like it's the iframe or the calendly or next, but altogether they seem to interfere with one another. Are there any good techniques for debugging what's going on w/ the next Router?

[stovmascript]

This is happening because iframe src changes cause new entries to be written into the browser's history, which the Next.js router reads when navigating. To prevent this, you can force the iframe component to remount, by adding a dynamic key, such as key={Math.random()} - that's probably why @ReinoutStevens' solution works, as I suspect your url is also being updated.

Note that this is an obvious performance issue with the iframe component itself and you should not use this with your React app components as children. But since we're talking about an iframe which loads arbitrary content as children, it's probably not that big of a deal.

[mtycholaz]

@ReinoutStevens I've ran into the same issue with Angular. Would you mind explaining your solution? I've take a peek at your sample, but I'm not familiar with React, and I would like to port this fix over to Angular.

[ReinoutStevens]

In React you can add a key to a component. If the key changes you force react to rerender the component. Apparently the browser writes to the History when changing the iframe src, and NextJS gets reads from the History, so the interplay is not correct. Remounting the iframe ( as the key changes ) fixes it.
No experience with angular, so dont know if they have a similar concept.