Server side rendering of `ResponsiveNavigation` has issues due to referring to `window` in the code

[digiaonline]

Server side rendering of `ResponsiveNavigation` has issues due to referring to `window` in the code

[takacsmark]

I added a condition to all occurrences of window in ResponsiveNavigation like this:

import ExecutionEnvironment from 'react/node_modules/fbjs/lib/ExecutionEnvironment'

  componentDidMount() {
      if (ExecutionEnvironment.canUseDOM) {
          window.addEventListener('resize', this.update.bind(this));
      }

  }

  componentWillUnmount() {
      if (ExecutionEnvironment.canUseDOM) {
          window.removeEventListener('resize', this.update.bind(this));
      }
  }


  update() {
    const { breakpoint } = this.props;
    if (ExecutionEnvironment.canUseDOM) {
        this.setState({
          isTitleBarVisible: window.innerWidth < breakpoint,
          isTopBarVisible: window.innerWidth >= breakpoint
        });
    }

This definitely passes server rendering and will work on client side as before. The layout will of course fall apart on the server so it's not a final solution, but it proves the case.

[crisu83]

While I'm sure that your solution works I would just check if typeof window !== 'undefined'. We could even create a function for this in utils.js.

[takacsmark]

Sounds reasonable, but that would not solve server side rendering of the component. This way there is a FOUC (Flash of unstyled content) when the page is loaded.

[crisu83]

@takacsmark We've actually also been building an universal React application during the past months so now the SSR is far more familiar to me. AFAIK the FOUC only happens during development, and we fixed it by hiding the content until the assets have been loaded.

We've also noticed that the ResponsiveNavigation component still requires some refactoring for being production ready. How has it worked for you so far apart from this issue?

[takacsmark]

Good to hear you used this part with ssr.
We simplified our functional design for business reasons, and ended up using buttons instead of responsive navigation. So we have not looked into further details regarding ResponsiveNavigation.

[phoniks]

Has anyone had success using the typeof window !== 'undefined' solution? I'm trying it (in place of @takacsmark's ExecutionEnvironment.canUseDOM) but getting 'window is not defined'.