Modal keepMounted causes mis-match in server-side rendering

[beverlycodes]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Setting the keepMounted property to true on a Modal component should either:

• ensure that the Modal's children are mounted during server-side rendering, or
• have no impact on server-side rendering at all

Because the documentation explicitly points to the keepMounted property as a means to improve SEO, my expectation is that the Modal's children should be present on the SSR render. However, for my immediate use case I don't care if the children are there on SSR or not. I just need keepMounted Modals to not break SSR.

Current Behavior

When setting a Modal's keepMounted property to true, the Modal component will include content during the client's initial render that was not included during the server side render, causing a warning when React renders for the first time on the client. This is occurring because Portal does not render at all on the server side, but does render during the client's initial render. As a result, a keepMounted=true Modal component is incompatible with SSR.

Steps to Reproduce (for bugs)

I'm not sure if this can be reproduced on codesandbox.io since it requires SSR for demonstration. If there is a preferred way to structure code for SSR-based issues, I'll be happy to follow whatever guidelines are provided and provide that as an edit to this issue. This issue can be reproduced with an SSR-rendered component that contains a <Modal keepMounted={true}><div>Content</div></Modal>.

As explained above, this appears to be a case of Portal rendering nothing on SSR, and something on initial client render. It is hopefully trivial to reproduce in any dev's SSR rendering solution of choice, but if there is a preferred SSR setup for including in issue reports, let me know what that is and I can provide a basic project.

Context

I'm building a component whose modal children animate as the modal is shown. The keepMounted option ensures that those children are already in their proper starting positions before I toggle show to true on Modal. If I don't use keepMounted, the children will just pop into place. I can work around this issue using the onEnter* properties of Modal, but doing so requires orchestration of several state properties. That works, but is less preferable than having my whole component operate off of a single isOpen boolean, which is what keepMounted=true allowed for.

Your Environment

Tech	Version
Material-UI	1.0.0-beta.21
React	16.0.0
browser	Chrome 62.0.3202.75
Next.js	4.1.4

[oliviertassinari]

We need to revert #8907 when fixing this issue.

[alexeychikk]

I'm using keepMounted={true} on <Menu> component in gatsby environment. Menu children are not being rendered in SSR mode at all.