cross-domain iframe not hydrating after SSR on devServer

[gutofoletto]

Bug report

Describe the bug

It seems that when the app is loaded on a cross-domain iFrame nextJS (dev server) does not hydrate SSR pages / components unless they are visible on the screen.

• If you run the same project on a "same-domain" website it works as expected.
• If you remove visibility: hidden or display:none it works on both "cross and same domain" environment.

This behaviour was observed when upgrading from 9.2.0 to 9.2.1 (or greater)

To Reproduce

1. Clone this repository (there are some instructions on the readme file as well)
2. Set up your /etc/hosts file and point the domain to your localhost: 127.0.0.1 yourcustomdomain.dev.com
3. Go to the root folder and run nextJS devServer with yarn dev
4. Go to the public folder and serve index.html, you could use php local server if you want: php -S 0.0.00:8080
5. Open the browser and go to http://localhost:8080
6. Open the browser console and observe the logs
7. Only the iframe init log will be present and none of the logs from the HomePage will be displayed
8. The logs from HomePage will be triggered if you press "show" to display the component (removes the visibility: hidden css property)

Expected behavior

It is expected that when using the development server it would hydrate / rerender the components on a cross-domain iframe. Is that right?

Screenshots

System information

• OS: macOs 10.15.7
• Browser: Chrome Version 86.0.4240.80
• Version of Next.js: >= 9.2.1
• Version of Node.js: 10.16.0

[ealvarez968]

Hi, can I take a look at this?

[danwdart]

This is still reproducible on 12.1.0

[orrymr]

I just tried this with the latest Next canary branch, and the problem seems to be resolved:

Darn, I was hoping this would be my first issue (as it's tagged "good first issue").
Oh well :P

[shriekdj]

@gutofoletto I think this is more of an react's problem than the nextjs's i use suppressHydrationWarning prop to true for not getting issue in react js when using iframe.
But I also created the Seperate Component ( Client Side ) which is by default suppressHydrationWarning

'use client';
import * as React from 'react';

const IframeClient = (
  props: React.JSX.IntrinsicAttributes &
    React.ClassAttributes<HTMLIFrameElement> &
    React.IframeHTMLAttributes<HTMLIFrameElement>,
) => {
  const { suppressHydrationWarning, ...remainingProps } = { ...props };
  return <iframe
    {...remainingProps}
    suppressHydrationWarning={suppressHydrationWarning ? suppressHydrationWarning : true}
  />;
};

export default IframeClient;