Next.js: React portal support for server side rendering

[antonybritto]

Currently i am working on a AMP project where i need to render some AMP components directing into BODY. Though there are some external modules like 'react-portal' , 'react-portal-universal' does the same, but would like to see the native support in nextjs itself, as it can avoid extra webpack config change and react render tweaks.

[sergiodxa]

Portals are a client only feature because you need to provide a DOM element where to render them and there no API inside react-dom/server.

[antonybritto]

I have a requirement to do this in SSR as well. Trying to figure out the best way to do this.

[sergiodxa]

@antonybritto I think you'll need to create your own implementations of portals.

[PaulTondeur]

I think this answer is a bit too simplistic to say that one need to create their own implementation. I understand that it works differently serverside, but actually this is nothing I should be worrying about. Portals should just be supported by next.js out of the box.

[PaulTondeur]

@alinchican why not motivate your downvote instead of just downvoting? It sounds like you have a different opinion, so I would like to hear about that.

In my eyes next.js is a library for isomorphic react applications. Portals are a react feature and it sounds like next.js is not complete by not having support for a default react feature. Without support it would just partially support react and that would be a pity. It is great that next.js simplifies SSR and I think it should aim for being feature complete.

[timneutkens]

I'm not sure what you're referring to, React.createPortal is supported just fine, here's an example:
https://github.com/zeit/next.js/tree/canary/examples/with-portals

[timneutkens]

The original issue is about "Currently i am working on a AMP project" AMP has very different semantics and doesn't run client-side React.

[PaulTondeur]

Thanks @timneutkens. I ran into an issue (using PortalWithState) and arrived here in this topic and concluded incorrectly that it wasn't supported. It turns out that it works indeed when a pure portal is used. I understand that AMP is a total different case.

Excuses for the confusion and thanks for your time.

[alinchican]

@PaulTondeur Because you didn't search for an answer. Last reply was posted 1 year ago, a lot of things have changed meanwhile. Also, this framework is named next.js and not zeit.js. I didn't think it was necessary to motivate my reaction. I'm glad your issue was resolved.

[dextermb]

Edit: Nevermind, I missed that the example returns null if this.element is not set.