tajo/react-portal

How to enable SSR of portaled content?

al4str opened this issue · 9 comments

al4str commented

I use simple <Portal><Modal /></Portal> to render my modals.
But can't see it rendering in view-source tab.

Something missing in the docs?

7rulnik commented

@al4str currently it's not supported because of https://github.com/tajo/react-portal/blob/master/src/Portal.js#L15

But I have some ideas how we can make it work

al4str commented

@7rulnik I understand.
But why it is still mentioned in README ?

7rulnik commented

@al4str seems that it's should be deleted for now. You can send PR.

tajo commented

Fair enough. It would be better to say: "It doesn't break SSR". Portal is expecting DOM node as a target, so it's not really possible to SSR it?

  • 👍1
al4str commented

Why not just render the children, then?

const Portal = props => {
  if (!canUseDOM) return props.children;
  return ReactDOM.createPortal(props.children, props.node);
}
  • 👍1
tajo commented

@7rulnik Yea, the solution makes sense but the "why" doesn't really resonate with me. Portals are (almost) always hidden on the initial load.

@al4str The whole point of portals it to render components to a different scope (a new react tree). Why would we render them in-line during the SSR?

7rulnik commented

@tajo I think it can be edge case with hash in url. For example https://domain.com/page#popup

  • 👍2
mherodev commented

Ah, is this why I'm seeing the error

Warning: Expected server HTML to contain a matching <div> in <header>.

when trying to render <Portal />?

When I revert to react-portal@3 this error goes away and the portal continues to work, so I'm doing that for now. (although having to pass in isOpened is a little clunky)