How can I use React Portals with NextJS SSR?
I am struggling getting portals to run in my server side code, as a portal needs to be rendered on a DOM Node and this is not available on the server side. Are there any solutions for this?
13446 views
3 Answers
As fetching DOM Nodes is not working on the server side obviously, my current solution is to run it on the client side only.
Here you can see a snippet of my code:
const Banner = () => {
return ReactDOM.createPortal(
<div>I am an awesome banner</div>,
document.getElementById('banner-container'),
);
};
export const PageContent = () => {
const [showBanner, setShowBanner] = useState(false);
useEffect(() => {
if (!isServerSide()) {
setShowBanner(true);
}
}, []);
return (
<>
{showBanner && <Banner />}
</>
);
};Would be nice if someone can provide an example if he managed to get Portals running with Server Side Rendering too. 😊
👍
1
🎉
1
We need _document.js file in our pages folder with this structure ->
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
<div id="notifications"></div>
</body>
</Html>
);
}
}
export default MyDocument;and with that file we have place where to inject portal(in my case div with id="notifications".
This video does not address SSR problem, whatsoever. As a result of demonstrated implementation no portal contents will be rendered server-side, then once JavaScript is loaded, DOM is modified accordingly.
(edited)