React-modal: Server-side rendering (SSR)

[OliverJAsh]

Hi,

I have searched the issues and docs to try and understand what the current status of support for server-side rendering is, however it is not clear.

Underneath the App Element heading, the docs mention:

If you are doing server-side rendering, you should use this property.

Can you elaborate?

Related issues: https://github.com/reactjs/react-modal/issues/112 https://github.com/reactjs/react-modal/issues/362 https://github.com/reactjs/react-modal/issues/49 https://github.com/reactjs/react-modal/issues/576

Is server-side rendering something that is already supported, or will be in the future?

Thanks,
Oliver

[NathanielHill]

For reference, since it was a pain for me, if you are doing SSR, use the following code to prevent errors server-side:

if (typeof(window) !== 'undefined') {
    ReactModal.setAppElement('body')
}

You could put this in componentDidMount() anywhere you use a modal or I put it in a custom modal component so it's nice and DRY.

[diasbruno]

@NathanielHill It can be a nice solution. We have canUseDOM variable, probably we can use it on https://github.com/reactjs/react-modal/blob/master/src/helpers/ariaAppHider.js. Would you like to PR this idea?

[lbelinsk]

Hey, I added a pr that might be also relevant for this issue: https://github.com/reactjs/react-modal/pull/668

[NathanielHill]

Awesome @lbelinsk, was going to do this any day now... :rofl: Thanks for taking care of it! :tada:

[lbelinsk]

My pleasure @NathanielHill :)

[diasbruno]

Released v3.4.5.

Thanks, @lbelinsk!

[OliverJAsh]

Does this mean the modal now gets rendered for SSR? Can we improve the docs to mention what the support is?

[NathanielHill]

@OliverJAsh whether it gets rendered on the server would have to do with your own code. By the nature of what a "modal" is, I doubt it would normally be rendered server-side since modals are triggered by client interaction. This is just a guard against getting errors from code that tries to reference the window object server side.

[lbelinsk]

@OliverJAsh I think it will be better to follow the conversation in this issue instead:
https://github.com/reactjs/react-modal/issues/576

It is still open just in order to remember to add docs for ssr support.

[OliverJAsh]

Found myself asking the same question ("what is the SSR support"?), but unfortunately there still aren't docs to cover this, so I'll try to provide a summary of what I've inferred (for future me and others, in absence of docs):

The modal uses React portals. Portals only work on the client-side, because they need a DOM element. For this reason, the modal is not rendered on the server.

https://github.com/reactjs/react-modal/blob/a2838bbfd11e6203ffb7df1b76575da328d0d3fd/src/components/Modal.js#L195-L196

If we wanted to enable rendering of the modal on the server, we would have to use an alternative portal mechanism. This was proposed in https://github.com/reactjs/react-modal/issues/112, but it seems the proposal did not receive enough attention, and the issue was closed.

I doubt it would normally be rendered server-side since modals are triggered by client interaction

Modals can have URLs too, so they can be triggered just by navigating to a URL. For this reason, we would like the modal to support SSR, so that the modal works without JS and before JS loads.

[OliverJAsh]

It would be good to add a warning when the modal is rendered in SSR, because right now it silently fails.