In React, how do I detect if my component is rendering from the client or the server?

Question

I\'m building a isomorphic application, but I\'m using a third-party component that only renders on the client. So, particularly for this component, I need to only render it

Answer 1

You can check if global window variable is defined or not. as in browser it should always be defined.

var isBrowser = window!==undefined

Answer 2

At the topmost level of the server Element hierarchy, one could add a ServerContext such as this:

class ServerContext extends React.Component {
  getChildContext() { return { isServer: true }; }
  render() { return React.Children.only(this.props.children); }
}

ServerContext.propTypes = {
  children: React.PropTypes.node.isRequired,
};

ServerContext.childContextTypes = {
  isServer: React.PropTypes.bool.isRequired,
};

// Create our React application element.
const reactAppElement = (
  <ServerContext>
    <CodeSplitProvider context={codeSplitContext}>
      <ServerRouter location={request.url} context={reactRouterContext}>
        <DemoApp />
      </ServerRouter>
    </CodeSplitProvider>
  </ServerContext>
);

Doing so, it should be possible to read the isServer from the context like this:

const Layout = (_, { isServer }) => (
  // render stuff here
);

Answer 3

You can also use componentDidMount(), as this lifecycle method is not run when the page is server-side rendered.