Электрод не показывает динамические данные в источнике страницы - PullRequest
Новая
       19

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

0 голосов
/ 28 февраля 2019

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

Когда я просматриваю источник страницы после полной загрузки страницы со всеми вызовами 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 включен в электроде.

1 Ответ

0 голосов
/ 31 марта 2019

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

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

Электрод уже предоставляет абстракцию, каждый отображаемый компонент имеет возможность загрузки предварительно выбранных данных.,Подвох здесь в том, что вам нужно оценить, какие все данные должны присутствовать во время выполнения, потому что больше данных прямо пропорционально времени загрузки страницы (так как сервер не разрешит, если 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

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

...