空体使用 Prerender.io 和 Meteor答案

【问题标题】：Empty body Using Prerender.io with Meteor空体使用 Prerender.io 和 Meteor
【发布时间】：2017-06-21 21:23:32
【问题描述】：

我尝试将 prerender.io 与 Meteor 1.5 应用程序一起使用。我使用 npm prerender-node 包

  var prerenderio = Npm.require('prerender-node') .set('prerenderToken', token)
                                                .set('protocol', protocol)
                                                .set('host', host);  


  // Feed it to middleware! (app.use)
  WebApp.connectHandlers.use(prerenderio);

我使用代码 200 登录 prerender.io。分页被缓存，但页面仅包含头部和空正文。

为了进行测试，我添加了包meteorhacks:inject-initial 并在正文中插入了行，它工作正常。我想知道我是不是 flowrouter 的路由器有问题。

我也放

<head>
  <meta charset="utf-8">
  <meta name="fragment" content="!">
  ALL  <meta ... >
  <!-- a script -->
  <scripts ... >
  <!-- prerenderio -->
  <script> console.log(Date()); window.prerenderReady = false; </script>  
</head>

为了测试，我刷新了 prerender.io 的缓存。当我测试https://www.toto.com?_escaped_fragment_=

我没有时间在客户端控制台上。我在 prerender.io 上看到了新行

我做了同样的测试 https://www.bing.com/webmaster/diagnostics/seo/analyzer

现在让我们看看新的缓存行内容：

  Server: nginx/1.4.6 (Ubuntu)
  Date: Wed, 21 Jun 2017 20:16:33 GMT
  Content-Type: text/html; charset=utf-8
  Transfer-Encoding: chunked
  Connection: close
  Vary: Accept-Encoding
  Cache-Control: no-cache
  Content-Encoding: gzip


  <!DOCTYPE html>
  <html>
  <head>
  <script type="text/javascript" src="/packages/meteorhacks_zones/assets/utils.js?1498075872540"></script>
  <script type="text/javascript" src="/packages/meteorhacks_zones/assets/before.js?1498075872540"></script>
  <script type="text/javascript" src="/packages/meteorhacks_zones/assets/zone.js?1498075872540"></script>
  <script type="text/javascript" src="/packages/meteorhacks_zones/assets/tracer.js?1498075872540"></script>
  <script type="text/javascript" src="/packages/meteorhacks_zones/assets/after.js?1498075872540"></script>
  <script type="text/javascript" src="/packages/meteorhacks_zones/assets/reporters.js?1498075872540"></script>


    <link rel="stylesheet" type="text/css" class="__meteor-css__" href="/f6675d95a01ce3ac63036505eb1ace94a68b1bb7.css?meteor_css_resource=true">
  <meta charset="utf-8">
    <title>Toto</title>

    ...

    <meta name="robots" content="index, follow">

    ...

    <!-- http referrer links -->
    <meta name="referrer" content="always">


    <meta name="fragment" content="!">



    <!-- No resize on mobiles -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <!--320-->

    <!-- a script -->
    <script ... ></script>

    <!-- prerenderio -->
    <script> console.log(Date()); window.prerenderReady = false; </script>

  </head>
  <body>



  <script type="text/javascript">__meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%401.5-beta.8%22%2C%22meteorEnv%22%3A%7B%22NODE_ENV%22%3A%22production%22%2C%22TEST_METADATA%22%3A%22%7B%7D%22%7D%2C%22PUBLIC_SETTINGS%22%3A%7B%22analyticsSettings%22%3A%7B%22autorun%22%3Afalse%2C%22Mixpanel%22%3A%7B%22token%22%3A%225fc6f49885cbf2ec8d80a15c0a310399%22%2C%22people%22%3Atrue%7D%2C%22Google%20Analytics%22%3A%7B%22trackingId%22%3A%22UA-60492530-2%22%7D%7D%2C%22ga%22%3A%7B%22account%22%3A%22UA-60492530-2%22%7D%7D%2C%22ROOT_URL%22%3A%22https%3A%2F%2Fwww.Toto.com%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22appId%22%3A%221yyz6nr2dyysy1rxvng3%22%2C%22autoupdateVersion%22%3A%2237dc9ce25f5e0f5f3a2253bdcb3c80166a4e83d2%22%2C%22autoupdateVersionRefreshable%22%3A%2273bc2363ca210840ec3d6947a649e3388beca5c5%22%2C%22autoupdateVersionCordova%22%3A%224b9074136556412500d12284625a4f5d81ac3f3d%22%7D"));</script>

    <script type="text/javascript" src="/fef4959b1bc37d5a9c2a1c09ddcb28fd7c374f10.js?meteor_js_resource=true"></script>


  </body>
  </html>

这里我给出了整个正文内容。我没有删除任何行。

【问题讨论】：

我认为 Meteor 1.5 可能会使用一些 ES6 代码，我们的 PhantomJS v2.1.1 浏览器无法处理 :( 我们正在努力切换到 Headless Chrome，但不能在那里提供 ETA。如果你能够同时切换到 Meteor 1.4 那么应该可以解决它。抱歉给您带来麻烦:(
我明白了。由于其他一些功能，我无法返回 Meteor 1.4。我们充分利用了 1.5 的所有优势。
你能给我发一封电子邮件到 todd@prerender.io 吗？等我们准备好后，我会看看如何让您使用 Chrome。
貌似你用的是ES6，prerender.io使用的Phantom处理不了。您可能有兴趣尝试this service with support of ES6，或确保您的应用程序包中没有 ES6 代码。
太棒了！我是早上安装的。只需几分钟，它就可以工作。我想知道我是否还需要

标签： meteor prerender

【解决方案1】：

在此处预渲染用户。我们遇到了 Prerender 的问题，它没有等到所有脚本都运行完成，因此计算出的 dom 还没有完全呈现，这听起来就像你遇到的那样。为了方便起见，我们使用此处复制的预渲染文档中描述的预渲染就绪标志解决了这个问题：

把它放在你的 HTML 中：

<script> window.prerenderReady = false; </script>

当我们看到 window.prerenderReady 设置为 false 时，我们将等到它设置为 true 以保存 HTML。当您的页面准备就绪时（通常在 ajax 调用之后）执行以下操作。

window.prerenderReady = true;

【讨论】：

我忘了说我把这个放在 main.html 中，我还把另一个用注入。我添加了一个 console.log 来检查两者是否都已执行。
您确定在所有数据加载完毕并且视图完全渲染后设置window.prerenderReady = true;？