React-slick: Markup for responsive breakpoint differs from server

Created on 5 Jan 2017 · 2Comments · Source: akiran/react-slick

When using server side rendering, if I request the page from a device that is covered by a responsive breakpoint setting, the markup differs between client and server.

Anyone got around that? We thought about infering the width of the device via the user agent on the request, but I was wondering if there's a better way for that.

queued

Source

tamorim

👍1

Most helpful comment

I had experienced the same issue.

Another workaround is to not render Slider components during server rendering, using componentDidMount for instance (be aware it will trigger a re-rendering though).

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = { injectSlider: false };
  }

  componentDidMount() {
    this.setState({ injectSlider: true });
  }

  render() {
    return this.state.injectSlider ? 
      <Slider> /* ... */ </Slider> : 
      <div> Static fake slider or whatever loader... </div>;
  }
}

bmenant on 12 Jan 2017

👍7

All 2 comments

I had experienced the same issue.

Another workaround is to not render Slider components during server rendering, using componentDidMount for instance (be aware it will trigger a re-rendering though).

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = { injectSlider: false };
  }

  componentDidMount() {
    this.setState({ injectSlider: true });
  }

  render() {
    return this.state.injectSlider ? 
      <Slider> /* ... */ </Slider> : 
      <div> Static fake slider or whatever loader... </div>;
  }
}

bmenant on 12 Jan 2017

👍7

Similar issues have been solved in the dev branch after the latest release. somewhere around commits: ce5074a e9bebd8 2e1468e
Changes will be released soon.
Please feel free to request reopen if disagree. In any case, you can go ahead with @bmenant's suggestion.