Search code examples
reactjsmedia-queriesisomorphic-javascriptinline-stylesserver-side-rendering

Server-side rendering + responsive design + inline styles -> which breakpoint to use?

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

According to the viewport size, the application layout/behavior changes. But all these changes can not only be done with plain CSS mediaquery: the JS behavior, and the underlying HTML structure also has to be changed according to the width.

For example I could have:

Under 800px width:

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

Above 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 that application. But on the server I don't have the width, so I don't know which HTML structure to return to the client.

Note that I'm not looking for a solution that use a static default server-side breakpoint, and that on the client correct the app. I am looking for a solution that would return to the client the proper html structure according to its device. So it should work fine if he disables javascript on his browser.

One could argue that I could render the html needed for both, and hide/show the required parts with plain CSS mediaqueries and display: none, but it would complicates the app and make it render a lot of unused html elements because generally it's unlikely that the user move above/under the breakpoint (I mean if he has a mobile device, the html elements for desktop will never be used)

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

I've seen some people are thinking about sniffing the browser UA to make an estimated guess of their viewport size. But even with some unsecure screen dimension detection, I'm not sure we can know the device screen orientation on the server-side.

Can I do anything to solve this problem?

Solution

  • I think Artsy found the best solution to this problem.

    They render everything on the server, and then only render the layout needed on the frontend.

    If on the server they are sure the device has certain boundaries, they eventually optimize the SSR by rendering only the required layout.

    https://artsy.github.io/blog/2019/05/24/server-rendering-responsively/