Dialog (Modal) SSR

[GMaiolo]

Hey all, is there any chance to get the Dialog (Modal) working with SSR? I've got a page that has to be SSRed because of SEO reasons and it uses a Dialog to display most of the content.
Not sure if this should be a feature request or a help request as I haven't seen any information about if the Dialog's SSR integration should be working or not.

[RobinMalfait]

There is a very low chance that we will be able to implement this behaviour. The Dialog uses a portal which is portaled to the document.body at runtime. If your SSR environment supports document.body then there is a chance that it might work.

In general, I do not recommend you to use a Dialog as a "page". Instead, create an actual page with all the content that you can navigate to. A modal could still be used at runtime while navigating inside your app though.

[GMaiolo]

Thanks @RobinMalfait for your reply

As for my particular need, even though I agree up to a certain point that using a static server-side rendered Dialog may not be ideal from a UX point of view, the solution we came up with makes a lot of sense UX-wise, so I ended up making my own custom Dialog without Headless UI

I think it's a good idea to provide SSR capabilities to all possible components in Headless UI
Although I'm not sure about the implementation as I'm not familiar with the codebase, I can dig a bit into it if you see fit

[knoefel]

@RobinMalfait I'm in a similar situation right now - i'm using remix and want to integrate the <Dialog /> component as a route. It's working fine with enabled JS, but when i disable JS the <Dialog /> won't render when i load the page.
I really like headlessui and want to keep using it, is there anything i can do to make it work? Thx in advance and also thx for the great work, much appreciated!!

[suchy]

I'm also a Remix user. I have the edit form in dialog and a nice trick is to change URL when the dialog is open. To do that dialog need to be rendered on the server. That would be a very useful possibility.

[sadiqsalau]

To improve SEO we had to set unmount to false on Headless UI components but it doesn't work for Dialogs ..

<Transition .... unmount={false} />

Adding an option such as direct or withoutPortal would be okay!