JSON 객체와 reactjs를 사용하여 서버 측 렌더링 된 초기 상태를 전달하기위한 윈도우 변수

Question

Reactjs가있는 동형 응용 프로그램에서 서버에 렌더링 된 동일한 초기 상태를 클라이언트에 전달해야합니다 (그러면 클라이언트가 ' 이벤트 바인딩 등의 앱).

나는이 초기 상태 창에 전역 변수를 설정

을 down-- 전달하는 두 가지 방법을 본 적이

:

<script> 
window.initialState = {{JSON.stringify(initialState)}} ; 
</script> 

또는 JSON 객체로 전달 :

<script id="initial-state" type="application/json"> {{JSON.stringify(initialState)}}</script> 

둘 다 응용 프로그램의 어디서나 쉽게 검색 할 수 있습니다. 하나를 다른 것에 사용하면 어떤 이점이 있습니까?

Answer 1

후자는 전역 변수를 피하고 전자는 DOM 조회를 피합니다. 나는 코드가 적기 때문에 전자와 함께 갈 것이다.

JSON에 </script이 있으면 주입 또는 실수로 오류가 발생할 수 있습니다. 이 문제를 방지하려면 <을 \u003c으로 바꿀 수 있습니다.

<script> 
window.initialState = {{ 
    JSON.stringify(initialState).replace(/</g, '\\u003c') 
}}; 
</script> 

Answer 2

저는 서버와 브라우저에서 일을 시작하는 시작 기능을 만들고 싶습니다. ') (

App.prototype.start = function(initState) { 
    React.render(RootComponent(initState), document.getElementById('container')); 
} 

이 경우 시작에서 아무튼 :

<script type="text/javascript"> 
    var app = new App(); 
    document.addEventListener('DOMContentLoaded', function(e) { 
     document.removeEventListener('DOMContentLoaded'); 

     app.start({{JSON.stringify(initialState)}}); 
    }); 
</script> 

시작 기능에서, 나는 브라우저 같은 것을 가지고 : 브라우저 측에 나는 인수로 초기 상태 개체가 있음을 렌더링 t 많은 일을하지만 전체 구현에서는 서버 측 렌더링도 여기에서 처리 할 것입니다. 이것에 대한 내 아이디어의 대부분은이 이야기와 예제에서 나온 것입니다 : https://github.com/zertosh/ssr-demo-kit