title: React/Redux isomorphic / server-side rendering and media queries
body: <p>I started creating an isomorphic React/Redux app based on Node. One requirement of the project is &quot;adapative&quot; rendering of specific components based on a &quot;mobile&quot; and &quot;desktop&quot; view. I have implemented Redux action and reducer to store screen-information about the user's view (based on media queries - &quot;small&quot;, &quot;medium&quot;, &quot;large&quot;) in the state. On resize the state/store gets updated. The default state is &quot;small&quot;.</p>
  <pre><code>const defaultState = {
      isMobile: true,
      isTablet: false,
      isDesktop: false,
      sizes: {
          small: true,
          medium: false,
          large: false,
          huge: false,
      },
  };
  </code></pre>
  <p>In the component which needs to be rendered &quot;adaptive&quot; in two different versions based on the screen size, I simply do a:</p>
  <blockquote>
  <p>if (small) return variation1</p>
  <p>if (medium) return variation2</p>
  </blockquote>
  <p>All working.</p>
  <p>Now I am facing two problems:</p>
  <ol>
  <li><p>my app is isomorphic, that means the markup renders also server-side. The server doesn't know anything about the user's browser and media queries. So because my default state is &quot;small&quot;, the server will always render &quot;variation1&quot;. The node-server is the entry point for the site. It looks like the rendering needs to be &quot;delayed&quot; (middleware?) and the server needs to get some information back from the client about the browser width before the React app gets &quot;delivered&quot;. Any idea how this problem can be solved?</p>
  </li>
  <li><p>because the rendering is based on the state, after load &quot;variation 1&quot; can be always seen first for a few milliseconds (flicker), even when the browser size is &quot;desktop&quot;. This is because the JS detection takes a few milliseconds before the state gets updated with the current screen width. I think this plays together with above problem and the default state.</p>
  </li>
  </ol>
  <p>I couldn't find any solution for 1, but I guess there must be something isomorphic AND responsive/adaptive.</p>