Trully Leverage Next JS SSR..

[Jbmanllr]

Hello, as the screens are not rendered server side, how can i leverage next js ssr for the interface?
For now only the SEO is on point via next-seo, as seen on beatgig.com for example. The content however is loaded after. How can i at least serve a minimalist version of the page with the basic html semantic and the text. At best the fully rendered page, as i think RNW is capable of rendering SSR ? (https://necolas.github.io/react-native-web/docs/rendering/)

[nandorojo]

If you search "SSR" in the issues and PRs in this repo, you'll see that I have thought/written about this quite a lot.

The short answer: kind of. You can make this work, but not with Dripsy. React Native Web "supports" SSR, until you need responsive design.

That said, the latest release of React Native Web finally supports an API for media queries. So while I don't currently plan on adding this kind of thing to Dripsy, it will be possible to render on the server with media queries with libraries like NativeWind and Tamagui. You sacrifice being able to use screen dimensions in render, as well as many other valuable elements, but it's a trade-off you can make.

[nandorojo]

If you want to render on the server anyway, all you have to do is set ssr={false} on the Dripsy provider. As long as you don't use responsive designs, then that will work just fine.

[Jbmanllr]

Hi i have just started recently to wrap my head about cross platform development issues, through Solito and RNW github. I'm still kind of confused why you'd use Next without rendering the page Server Side and why would it be default behavior of Solito, also by the fact that you have to set ssr to false to activate it.

Thanks for your help and good luck with your projects.

[jonsherrard]

I may be being really silly. But I've set ssr={false}, and despite the name/boolean being confusing. I am getting server rendered content with no issue. AND the responsive design works once the JS loads. Is that OK for most people?

[nandorojo]

yeah i know this naming was silly.

it will break hydration if you have responsive styles. just try resizing your window and refreshing and looking in the logs

[jonsherrard]

Understood, I see it now. I was starting with console open and mobile preview 🤦