How to persist DOM even after navigating away? (nextjs)

Hi,

I am creating a nextjs application and in that I have a very specific use case.

I have embedded an external website in my application using iframe.

The problem is when a user navigates away from that page (page containing the iframe), the entire DOM gets removed from the browser. This leads to high loading time when a user revisits that page.

Is there a way to create an exception so that the DOM persists event after navigating away from that page? Or is there a better way to use iframe so that it can also make use of server-side rendering?

Please ask if you need any more details.

Hi, !

As far as I know, by default, when you navigate away from a page in a Next.js app, the entire DOM for that page is indeed removed, including any iframes. This is part of Next.js's client-side routing behavior.

You could us keepAlive for the <Link> component . This can help maintain the state of a component even when navigating away from it. However, this is primarily designed for React components and may not work as expected with iframes.

https://nextjs.org/docs/app/api-reference/next-config-js/httpAgentOptions

Feel free to give it a go and report back 😃

Hi,