Question about ReactDOMServer.renderToStaticMarkup

[ashiq-prospero]

There is some issue with ReactDOMServer.renderToStaticMarkup, with the below code it renders the main container i.e react-photo-album--rows but its empty, images are not rendered

ReactDOMServer.renderToStaticMarkup(<PhotoAlbum
  photos={photos}
  {...config}
/>);

But when I add defaultContainerWidth it renders the image inside

<PhotoAlbum
  ...
  defaultContainerWidth={300}
/>

What I tried to solve:
I redered the component with below check, if mounted===true then only the component will render, esle it wont. But it didnt solve either

const [mounted, setMounted] = useState(false);

useEffect(() => {
  setMounted(true)
}, []);

Any help or suggestion would be appriciated.

[igordanchenko]

Does this answer your question?

https://react-photo-album.com/#HowItWorks_SSR

[ashiq-prospero]

there's no other way other than defaultContainerWidth is that right?

[igordanchenko]

Well, the documentation is pretty clear about it.

To enable server-side rendering, be sure to specify defaultContainerWidth prop. Otherwise, React Photo Album produces empty markup on the server and renders on the client only after hydration.