SSR and responsive mode

I already open this issue on the nextjs repo but it seems to be a problem with react-slick.

Describe the bug When I use next.js with react-slick and responsive options, there is a bug during the rehydration phase, the src attribute of the images are mixed between the slides.

The error message is Warning: Prop src did not match. Server: "http://via.placeholder.com/350x150?text=7" Client: "http://via.placeholder.com/350x150?text=8"

To Reproduce I made an example from examples folder : https://github.com/padupuy/next.js/tree/feature/with-react-slick

The code is right here : https://github.com/padupuy/next.js/blob/feature/with-react-slick/examples/with-react-slick/pages/index.js

Expected behavior The image sources must not be mixed

Screenshots

System information

• OS: macOS High Sierra 10.13.4
• Browser (if applies) : at least chrome and safari
• Version of Next.js: at least 5.1 and 6.0.2

[isBatak]

This is my solution:

import React, { PureComponent } from 'react';
import SlickSlider from 'react-slick';

class Slider extends PureComponent {
  state = {
    isClient: false
  };

  componentDidMount() {
    this.setState((state) =>  { isClient: true });
  }

  render() {
    const {
        children,
        responsive,
        ...rest
    } = this.props;
    const { isClient } = this.state;

    return (
      <SlickSlider 
          key={isClient ? 'client' : 'server'}
          responsive={isClient ? responsive : null}
          {...rest}
      >
        {children}
      </SlickSlider>
    );
  }
}

export default Slider;

[davidsanchez96]

I don’t know if is the best approach but I solved this problem by using dynamic import

import dynamic from 'next/dynamic'

const SliderComponentWithNoSSR = dynamic(import('../components/SliderComponent'), {
  ssr: false
})

export default () =>
  <div>
    <SliderComponentWithNoSSR />
  </div>