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: #112 #362 #49 #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: #668

[NathanielHill]

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

[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:
#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.

react-modal/src/components/Modal.js

Lines 195 to 196 in a2838bb

	if (!canUseDOM || !isReact16) {
	return null;

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 #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.