Как отправить объекты с сервера на клиентские компоненты в приложении «узел реакции-экспресс»

Question

Как я могу отправить объекты JS из Express бэкэнда клиентской стороне React компонентов?

Я могу отправлять простые переменные, устанавливая их в res.locals или cookies, но для более крупных объектов,как мне это сделать?

Не в пользу API, так как это приводит к загрузке страницы, а затем запрос заставляет пользователя ждать на экране.Мои данные доступны, как только сервер запущен.

Коротко о потоке кода:

Это приложение kraken и на стороне сервера,если я это сделаю,

router.get('/', (req, res) => res.render('index')),

ejs будет установлен в качестве механизма просмотра в экспресс-конфигурации, он вернет индексный файл в браузер с добавленным кодом реакции, добавленным webpackк этому.

Answer 1

В общем случае рекомендуется предоставить API, чтобы интерфейс React мог обновлять данные, например, когда пользователь перемещается по странице, не перезагружая всю страницу.React создан специально с учетом требований SPA, и большая часть реагирования предназначена для управления инкрементными обновлениями структуры страницы.

Если, тем не менее, вы все равно хотите подавать некоторое количество данных на свою страницу реакции при загрузке, выможете передать его с помощью тега сценария и JSON, например, так:

в вашем шаблоне:

<script>
  window._myInitialState = JSON.parse("{initialState|js|j|s}");
<script>

(используется js (JSON.stringify), j (JavaScript)string) и s (не экранируйте HTML) встроенные пылевые фильтры ) для рендеринга ваших данных.Например, с res.locals.initialState, установленным на

    {
      users: [
        { name: "Test" },
        { name: "Toast" },
        { name: "Foo" },
        { name: "Bar" },
      ]
    }

, JSON должен закодировать это в следующий скрипт:

    <script>
      window._myInitialState = JSON.parse("{\"users\":[{\"name\":\"Test\"},{\"name\":\"Toast\"},{\"name\":\"Foo\"},{\"name\":\"Bar\"}]}");
    <script>

С этим в вашем шаблоне вы сможете получить доступ к window._myInitialStateв вашем коде React, например, чтобы загрузить его в ваш корневой компонент, например:

  componentDidMount() {
    this.setState(window._myInitialState);
  }