SSR 부분에서 window를 참조하면 빌드 실패

Gatsby는 빌드시 페이지를 생성하지만 페이지에서 window.innerwidth를 참조하면 오류가 발생합니다.

"window" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html



  ReferenceError: window is not defined

node 로 페이지 생성하고 있기 때문에 window 객체가 없는 것은 당연하다.



window 의 참조 어째서 빌드 실패하고 있지 않지! ! 아아💢

화나도 공식 봐도 github 봐도 해결되지 않기 때문에, 이 슈퍼 귀찮은 문제의 대응 방법을 생각해 보았습니다.

한 번 상태에 넣을 수 있도록

class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      width: 0, // or your default width here
    }
  }
  componentDidMount() {
    this.handleWindowSizeChange() // Set width
    window.addEventListener('resize', this.handleWindowSizeChange)
  }

  componentWillMount() {
    // Don’t use this as the API is deprecated
  }

  // make sure to remove the listener
  // when the component is not mounted anymore
  componentWillUnmount() {
    window.removeEventListener('resize', this.handleWindowSizeChange)
  }

  handleWindowSizeChange = () => {
    this.setState({ width: window.innerWidth })
  }

  // rest of code
}

issue에서 논의되었습니다.
state 에 넣을 수고이고, 아마 되는 것이 아니다-라고 느낌입니다.

SSR이면 해당 구성 요소를 마운트하지 않습니다.

MUI에 NoSSR이 준비되어 있으며, 여기를 사용하면,
SSR 의 경우는 그 컴퍼넌트를 마운트 하지 않는 것으로 할 수 있습니다.

MUI 이외에도 비슷한 구조가 있다고 생각합니다.

import { NoSsr, List, ListItem, Tooltip } from "@material-ui/core";

略
         <NoSsr>
          <Tooltip
            id="instagram-twitter"
            title="Follow us on twitter"
            placement={window && window.innerWidth > 959 ? "top" : "left"}
            classes={{ tooltip: classes.tooltip }}
          >
            <Button
              href="https://twitter.com/CreativeTim?ref=creativetim"
              target="_blank"
              color="transparent"
              className={classes.navLink}
            >
              <i className={classes.socialIcons + " fab fa-twitter"} />
            </Button>
          </Tooltip>
         </NoSsr>

이것은 window 이외의 문제도 해결할 수 있기 때문에 이것입니다.

원래 코드를 다시 쓰지 않는 Polyfill

window를 해결할 정도로 더 쉽게 할 수 없습니까? ! 확실히 해 ~ 탄 지로 오 ~!



있었습니다. 더 끈적한 접근이.

여기를 import하면 window 참조로 떨어지지 않게 됩니다.
addEventListener도 작동합니다.

import { window } from 'ssr-window';


      <ListItem className={classes.listItem}>
        <Tooltip
          id="instagram-tooltip"
          title="Follow us on instagram"
          placement={window && window.innerWidth > 959 ? "top" : "left"}
          classes={{ tooltip: classes.tooltip }}
        >
          <Button
            color="transparent"
            href="https://www.instagram.com/CreativeTimOfficial?ref=creativetim"
            target="_blank"
            className={classes.navLink}
          >
            <i className={classes.socialIcons + " fab fa-instagram"} />
          </Button>
        </Tooltip>

어쨌든 떨어지지 않습니다.

요즘 언제 캐릭터가 너무 흥미 롭습니다.

SSR의 프레임 워크 안에서 해주지 않습니까? ! 안돼! 더 즐겁게 해줘!

라고 생각했습니다.