title: How to do SSR for responsive apps without knowing the device's screen size upfront?
body: <p>I want to SSR my app for my users.</p>
  
  <p>But my app code uses a <code>useEffect</code> to detect what is the size of the user's screen width, and only then the App is rendered.</p>
  
  <p>Something like:</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>  // THE LAYOUT INITIAL STATE IS NULL
  
    useEffect(() =&gt; {
      // CHECK FOR window.innerWidth AND DECIDE LAYOUT
      // UPDATE LAYOUT STATE
    });
  
    return(
      layout &amp;&amp; &lt;AppComponents&gt;   // IF THERE IS NO LAYOUT, NOTHING IS RENDERED
    );
  </code></pre>
  
  <p><strong>Component.js</strong></p>
  
  <pre><code> // I SERVE THE LAYOUT THROUGH CONTEXT AND I ACCESS IT INSIDE OF THE COMPONENTS
  
   const layout = useLayout();
  
   return(
     layout === "MOBILE" ? ComponentMobile : ComponentDesktop
   );
  </code></pre>
  
  <p><strong>QUESTION</strong></p>
  
  <p>I cannot rely on a code inside of a <code>useEffect</code> to render stuff on the server. So, somehow I need to "decide" which layout to use for the first and only render on the server.</p>
  
  <p>So my options, at least the ones I've though of so far, are:</p>
  
  <p><strong>OPTION #1</strong></p>
  
  <p>Try to guess the user's device screen size, and render something that might not be optimal for their screen size.</p>
  
  <p>Because right now, the CSS styles that I'm rendering depend on the user's screen size.</p>
  
  <p><strong>OPTION #2</strong></p>
  
  <p>Move entirely to <strong>media queries</strong> to handle responsiveness, so the CSS will always be the same and it will adapt automatically to whatever size of screen is being used.</p>
  
  <p>So far I haven't been using media queries at all. All my layout decisions are made during the render, and all the component render the styles based on the layout that was decided from <strong>App.js</strong> state.</p>
  
  <hr>
  
  <p>What is the best way of handling this? Is there a best practice for this?</p>
  
  <p><strong>NOTE:</strong></p>
  
  <p>I am using <code>styled-components</code>, so this is basically what I do:</p>
  
  <p>This is a crude example, but that's the idea.</p>
  
  <pre><code>
  // THIS IS MUCH EASIER TO WRITE THAN A BUNCH OF MEDIA QUERIES (IMO)
  
  const Styled_DIV = styled.div`
    font-size: ${props =&gt; 
      props.layout === "MOBILE" ? "16px" 
      : props.layout === "TABLET" ? "18px" 
      : "20px"
    };
  `;
  </code></pre>