Way to render <Modal isOpen /> on server side

[QzCurious]

How it current work

Currently, it's okey to have <Modal isOpen /> on SSR. But it's only compatible on syntax level. The Modal is open on client side.

https://react-aria-ssr-modal.vercel.app/
https://github.com/QzCurious/react-aria-ssr-modal

Screen.Recording.2024-04-24.at.4.38.25.PM.mov

Since modal use portal under the hood, which is only supported on client side.

Feature Request

I'm wondering if we could have a <Modal noPortal /> flag so that Modal just render at the position where it is. Then <Modal noPortal isOpen /> is supported during SSR.

[snowystinger]

Wouldn't that be problematic on the client? Either it's not going to hydrate correctly if we automatically apply this or it's going to be rendered in a weird/broken place until the prop is changed?

[QzCurious]

I'm not sure what is failing hydration and what "automatically" means. Maybe my description is not concise, let me put it in another way:
Radix UI have there Dialog Portal separate from actual content. So as a user, I can render an opened dialog on SSR if I need (primary for progressive enhancement for me).

Screen.Recording.2024-07-11.at.9.mp4

Since RAC already have its shape on how modal is composited, extract portal out of it might not be ideal. That's why I were suggesting adding a flag for that.

[snowystinger]

Ah, I think this would be considered a pretty advanced use-case. You could create your own Modal, something like so https://codesandbox.io/p/sandbox/distracted-orla-jqyr72?file=%2Fsrc%2FApp.js%3A29%2C11

I've mostly just copied from our code, you could probably strip it down further, I stopped when I had a demonstration.

If we added the ability to render outside a portal we'd be in unstable territory because we make assumptions for calculating the position. I'm not sure what other assumptions we've made. We haven't tested anything that is structured like this.