seo Question posted in
Some basic information to get you started with this can be found here.

NextJS and Responsive Design – SEO

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    This is how I tackled the problem I defined a theme and breakpoints for my stylings. in theme.js file I use createTheme from material-ui. it gives you the option of defining breakpoints:

      breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1220,
      xl: 1920,
    },
  }

    I predefined sizes I want to change styles based on them. meaning that 0 to 600 is a mobile view…
    this is how I use breakpoints in my styles classes

    const styles = theme => {
  return {
 classname: {
    //css codes for web view
      [theme.breakpoints.down('sm')]: {
        //css codes for mobile view. 
      },
      [theme.breakpoints.between('sm', 'md')]: {
        //css codes tablet view
      },
      [theme.breakpoints.up('md')]: {
       //css codes for resizes between web to tablet size
      },
    },
    }}

    By resizing the window or opening the page in different devices you will see the different styles. It works fine in both ssr and client side components.

    note:
    If you are not interested in predefining the sizes you can use a different size for each css class like this one.

     [theme.breakpoints.down('600')]: {
        //css codes for mobile view. 
      },
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search