电极在页面源中不显示动态数据答案

【问题标题】：Electrode doesn't show dynamic data in page source电极在页面源中不显示动态数据
【发布时间】：2019-02-28 05:17:13
【问题描述】：

使用电极，我注意到了这种奇怪的行为 -

当我在页面完全加载所有 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。

【问题讨论】：

标签： reactjs walmart-electrode

【解决方案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

我就发在这里，以防有人卡住。

【讨论】：