Combining Server-Side Rendering and Responsive Design

[anton-karlovskiy]

@pi0 @danielroe cc @addyosmani

One of the pains I've experienced in SSR of Next.js is to realize responsive design without unnecessary DOM elements being rendered.
In this project, we have the same case.

Problems in universally rendered apps with conditional rendering in regard to the responsive layout

• window.mediaQuery cannot be used since it's not available on server-side rendering and there would be a DOM tree mismatch issue.
• Using CSS media query would result in rendering all of the elements regardless of whether they are used either on desktop or on mobile.

I think this article explains this well.

We managed to avoid rendering unnecessary DOM elements by using https://github.com/artsy/fresnel in the Next.js project.

@pi0 @danielroe Could you please suggest what to use in Nuxt.js? Thank you.

[danielroe]

You could use this module: https://github.com/nuxt-community/device-module

Or render both components and selectively hydrate based on screen size on client side using https://github.com/maoberlehner/vue-lazy-hydration