Объект JSON против переменной окна для передачи исходного исходного состояния на стороне сервера с помощью responsejs

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. Я бы пошел с первым, просто потому, что он требует меньше кода.

Одна проблема в том, что у вас есть </script в вашем JSON, это может привести к впрыску или случайной ошибке. Чтобы предотвратить это, вы можете заменить < на \u003c.

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

Answer 2

Мне нравится создавать функцию запуска, которая удаляет все на сервере и в браузере. На стороне браузера оказываю, что начальное состояние объекта в качестве аргумента:

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

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

В функции запуска, у меня есть что-то подобное для браузера:

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

В этом случае начало() Безразлично» t сделать многое, но в полной реализации я бы также обработал серверный рендеринг здесь. Большинство моих идей для этого пришли из этого разговора и примеров: https://github.com/zertosh/ssr-demo-kit