Электрод не показывает динамические данные в источнике страницы

Question

Используя электрод, я заметил это странное поведение -

Когда я просматриваю источник страницы после полной загрузки страницы со всеми вызовами API и данными, я могу просматривать только статический контент, например, гиперссылки, заголовки, ссылки нижнего колонтитула и т. Д.

Я создал собственный обработчик токена, который проверяет context объект и заполняет пользовательские токены, присутствующие в index.html, Так что всякий раз, когда я console.log(context.user.content)регистрируются только статические данные, такие как гиперссылки, заголовки, ссылки нижнего колонтитула.

Я полагаю, что это проблема, но я не могу обернуть голову, почему электрод не распознает содержимое, отображаемое динамически.

Файл Token-Handler.js

import Helmet from 'react-helmet';

const emptyTitleRegex = /<title[^>]*><\/title>/;

module.exports = function setup(options) {
  // console.log({ options });
  return {
    INITIALIZE: context => {
      context.user.helmet = Helmet.renderStatic();
    },
    PAGE_TITLE: context => {
      const helmet = context.user.helmet;
      const helmetTitleScript = helmet.title.toString();
      const helmetTitleEmpty = helmetTitleScript.match(emptyTitleRegex);

      return helmetTitleEmpty ? `<title>${options.routeOptions.pageTitle}</title>` : helmetTitleScript;
    },
    REACT_HELMET_SCRIPTS: context => {
      const scriptsFromHelmet = ["link", "style", "script", "noscript"]
        .map(tagName => context.user.helmet[tagName].toString())
        .join("");
      return `<!--scripts from helmet-->${scriptsFromHelmet}`;
    },
    META_TAGS: context => {
      console.log(context,'123') //this is where I am checking
      return context.user.helmet.meta.toString();
    }
  };
};

default.js

module.exports = {
  port: portFromEnv() || "3000",
  webapp: {
    module: "electrode-react-webapp/lib/express",
    options: {
      prodBundleBase: '/buy-used-car/js/',
      insertTokenIds: false,
      htmlFile: "./{{env.APP_SRC_DIR}}/client/index.html",
      paths: {
        "*": {
          content: {
            module: "./{{env.APP_SRC_DIR}}/server/views/index-view"
          },
        }
      },
      serverSideRendering: true,
      tokenHandler: "./{{env.APP_SRC_DIR}}/server/token-handler"
    }
  }
};

Любая подсказка?

РЕДАКТИРОВАТЬ 1

Тем не менее, любые последующие обновления, которые происходят в метатегах, отображаются. Я не уверен, что это то, что электрод позволяет или является особенностью react-helmet,

РЕДАКТИРОВАТЬ 2

SSR включен в электроде.

Answer 1

Покопавшись в документах, понял, что возникло небольшое недоразумение. Таким образом, если данные должны присутствовать в источнике страницы, они должны быть предварительно обработаны сервером.

Почему это не показывалось, когда я задал вопрос? Потому что данные оценивались во время выполнения, потому что источник страницы отображал только статическое содержимое.

Electrode уже предоставляет абстракцию, каждый визуализируемый компонент имеет возможность загружать предварительно извлеченные данные. Суть в том, что вы должны оценить, какие все данные должны присутствовать во время выполнения, потому что больше данных прямо пропорционально времени загрузки страницы (поскольку сервер не будет обрабатываться, если API, от которого вы зависите, не вернет вас с успехом или провал)

С точки зрения реализации, каждый маршрут имеет параметр, называемый init-top который выполняется до загрузки вашей страницы.

const routes = [
  {
    path: "/",
    component: withRouter(Root),
    init: "./init-top",
    routes: [
      {
        path: "/",
        exact: true,
        component: Home,
        init: "./init-home"
      },

в init-homeВы можете определить это что-то по строкам -

import reducer from "../../client/reducers";
const initNumber = async () => {
  const value = await new Promise(resolve => setTimeout(() => resolve(123), 2000));
  return { value };
};
export default async function initTop() {
  return {
    reducer,
    initialState: {
      checkBox: { checked: false },
      number: await initNumber(),
      username: { value: "" },
      textarea: { value: "" },
      selectedOption: { value: "0-13" }
    }
  };
}

Итак, теперь, когда вы загружаете компонент, он загружается с этим initialState вернулся в init-home

Я просто выложу это здесь, на случай, если кто-нибудь застрянет.