Instantsearch.js: document is not defined

[kievechua]

I'm trying to tun react-instantsearch with server side rendering.
Anyway to get around this?
Currently trying to run it through, https://github.com/zeit/next.js

[vvo]

@kievechua for now we do not support server side rendering or react-native, we are working on it actively though. Thanks.

[kievechua]

My current issue is document.something get called when I import instantSearch from 'react-instantsearch.
Can it delay the call so I can do something like this?

const App = () => {
  let content;

  if (isClient) {
    content = (<InstantSearch
      appId={appId}
      apiKey={apiKey}
      indexName={indexName}
    >
       // The instantsearch components will go here
    </InstantSearch>)
  }

  return <div>{content}</div>;
}

Also, I can't seem to find the source code, is it release yet?
Or I just too blind to see haha

[devwax]

@kievechua React's componentDidMount() lifecycle method isn't called on the server during server-side rendering, so you could remove the (IsClient) conditional and use componentDidMount to render the client-side only components there.

The problem is that you will likely get an error / warning in the console from react stating that the rendered components sent from the server don't match the client rendered components, thereby defeating the purpose of server side rendering.

The way I get around that is by keeping track of a reactive variable _(I'm using Meteor)_ called initialRender. It's set to true by default, and then I set it to false in the main App component's componentDidMount method. Then that triggers another render after the initial render which renders the client-side only components.

Example:

const App = ({initialRender}) => {
  componentDidMount() {
    // if it's true set it to false
    (initialRender === true) && AppState.set({initialRender: false})
  }

  render() {
    // (...)
  }

Then I can check the state of initialRender with AppState.get('initialRender') in any other components that need it. (the top-most component's componentDidMount fires last, so we can count on all the other components having been already rendered at that point)

Admittedly, it's a bit of a mess compared to using universal javascript that can render on the server.

[bobylito]

@kievechua We didn't dig completely on this part :( But we're planning on writing a proper guide for the final release about server side rendering.

[bobylito]

We removed themeable that was causing this error and we tested using next and we're happy to let you know that the latest version (beta 20) is working out of the box.