React SSR - window.height/width를 처리하십시오.

Question

React with SSR FlowRouter를 사용하고 있습니다. 이 때문에 라인의

:

나는 때문에 클라이언트와 서버 코드의 차이 그게 전부 알고 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server.

(I이 액세스 할 수없는 :

var height = (Meteor.isClient ? window.innerHeight : 0); 
<div style={{top: height+'px' }}> 

내가 그런 경고가 내 서버의 창).

경고를 피할 방법이 있습니까?

Answer 1

직면 한 경고는 서버에서 처음 렌더링 된 html과 클라이언트 사이의 체크섬 오류로 인해 발생합니다. 정확하게 지적했듯이 서버에 window 개체가 없으므로 window.innerHeight을 계산할 수 없습니다. 이로 인해 div의 style 속성에서 렌더링 된 html이 달라져 경고가 발생합니다.

가능한 해결 방법은 구성 요소의 state에 height 가변 이동하고 설정 0의 초기 상태에이어서 componentWillMount의 체크

this.setState({height: (Meteor.isClient ? window.innerHeight : 0)}); 

수행 여기 정확한 높이를 설정하는 것이다. 이렇게하면 클라이언트와 서버의 초기 렌더링이 동일 해집니다. 그러나 componentDidMount은 클라이언트에서만 호출되기 때문에 state이 변경되면 window에서 올바른 height으로 구성 요소가 다시 렌더링됩니다. 당신이 의도적으로 서버와 클라이언트에 다른 무언가를 렌더링해야하는 경우 docs

에서

, 당신은 두 단계 렌더링을 수행 할 수 있습니다. 클라이언트에서 다른 것을 렌더링하는 구성 요소는 this.state.isClient과 같은 상태 변수를 읽을 수 있습니다. true을 componentDidMount()으로 설정할 수 있습니다. 이렇게하면 초기 렌더링 패스가 서버와 동일한 내용을 렌더링하여 일치하지 않게되지만 수화 직후에 동 기적으로 추가 패스가 발생합니다. 이 방법은 두 번 렌더링해야하기 때문에 구성 요소의 속도가 느려지므로주의해서 사용해야합니다.