Server-side support + responsive design + built-in styles & # 8594; which breakpoint to use?

Question

I have a responsive web application built with ReactJS for which I want to one day support server-side rendering.

The layout / behavior of the application changes according to the size of the viewport. But all these changes can be made not only with simple CSS content: the JS behavior and the basic HTML structure must also be changed to fit the width.

For example, I could:

Under 800 pixels wide :

<div class="app"> <div class="menu-mobile">...</div> <div class="content">...</div> <div class="mobile-left-menu">...</div> <div class="footer-mobile">...</div> </div> 

800px Width :

 <div class="app"> <div class="menu">...</div> <div class="main"> <div class="left-menu">...</div> <div class="content">...</div> <div class="right-menu">...</div> </div> <div class="footer">...</div> </div> 

Now I want to use server side rendering for this application. But on the server, I have no width, so I don’t know what HTML structure to return to the client.

Please note that I am not looking for a solution that uses a static breakpoint on the server side, and that there is an application fix on the client. I am looking for a solution that will return to the client the proper html structure according to its device. Therefore, it should work fine if it disables javascript in its browser.

---

It can be argued that I could display the html needed for both and hide / show the necessary parts using regular CSS and display: none media queries, but this will complicate the application and make it display a lot of unused html elements, because in general it is unlikely so that the user moves above / below the breakpoint (I mean that if he has a mobile device, the html elements for the desktop will never be used)

Also, if I want to use the inline style, it becomes complicated because I have to display these inline styles for the correct width on the server.

I saw some people think about sniffing the UA browser in order to estimate the estimated size of their viewport. But even with some insecure detection of screen sizes, I'm not sure that we can know the device screen orientation on the server side.

Can I do anything to solve this problem?

Answer 1

I think Artsi has found a better solution to this problem.

They display everything on the server, and then only display the layout needed for the external interface.

If on the server they are sure that the device has certain boundaries, they will ultimately optimize the SSR by displaying only the desired layout.

https://artsy.imtqy.com/blog/2019/05/24/server-rendering-responsively/

Answer 2

I think this is what you want, but this is not a prefect decision

1. What is important

you want the mobile user to receive the mobile page directly and without html in the PC version and vice versa, which does not require css (instead of the built-in style) and less network

2. How do I solve it

use the browser user agent to detect the mobile or tablet, and you can have the forecast and rendering on your server, when the client got everything downloaded, retest the screen and redisplay if you have a false prediction.

you can associate a callback with a change in the size and orientation of the window, change the reduction and rendering automatically

3.shot comings

less network means less means very little

false prediction may occur, when this happens, the page may refresh at loading

 //server side detect and show different, if got force param, use force solution const detected = bowser._detect(req.get('User-Agent')) const initState = req.query.force ? { [req.query.force]: true, } : { bowser: { mobile: detected.mobile, tablet: detected.tablet, } } const redux = initStore(initState) serverRender(redux) //component X, show different content const X = ({ mobile }) => (<div> {!!mobile?(<div>mobile</div>):(<div>pc</div>)} </div>) export default connect((state) => { return { mobile: detected.mobile, tablet: detected.tablet, } })(X) //top level component componentDidMount() { const reflow = () => { switch ($(window).width()) { case >800: this.props.dispatch(setSolution('pc')) default: this.props.dispatch(setSolution('mobile')) } } if (typeof window != 'undefined') { reflow() } $(window).resize(() => { reflow() }) $(window).on("orientationchange", () => { reflow() }) }