Search code examples
reactjsmaterial-uiserver-side-renderingnext.js

NextJS and Responsive Design

I have developed quite a big single page application using create-react-app.
I am in the process of migrating everything to NextJS, mainly for SEO purposes.
I'm scratching my head on one issue : what is the best way to handle responsive design?
In my create-react-app legacy code, I'm always keepings components in sync with window.innerWidth, and am using it to handle most of the responsiveness (except for the grid layout that is handled by material-ui).
But since we can't guess the client's width during the server render, then how can you avoid a 'flicker' of the UI?
Do we need to delay any responsive UI logic until we can execute on the client?

Solution

  • The solution is :
    using javascript to handle responsivness is bad practice, css should be used if we don't want to browser to re-flow the content on the screen.
    if you are using material-ui, take a look at this page