标签: prerender

我在运行Nginx的应用程序中包含prerender时遇到问题,我已经定义了一个简单的规则,用于将所有http请求重写为https,但是预渲染在运行GoDaddy证书的https上有一些问题,它会缓存页面但内容为空.我已经在http上测试了它并且工作正常,我现在正在尝试的是,如果我http_user_agent是Prerender,我想保持http网址完好无损,否则将网址重写为https.

欢迎任何帮助/意见/建议.

我有以下的代码，预取和预呈现*悬停特定链接，我的问题是，我需要添加每次新的链接，还是不多，所以我改变了href？

$(".prerender").on("mouseover", function() {
        var link = $(this).attr("href"),
            prerenderLink = $("#prerenderLink");
        if (prerenderLink.length) {
            if (prerenderLink.attr("href") === link) return;
            prerenderLink.attr("href", link);
        } else {
            $('<link id="prerenderLink" rel="prefetch prerender" href="' + link + '" />').appendTo("body");
        }
    });

删除、更改是否会href取消先前定义的预渲染/预取，href甚至将其从缓存中删除？或者因为它一旦留在缓存中就被调用了？

另外，哪里可以测试？

*因为预渲染是一项高级实验性功能，错误触发它会导致用户体验下降，包括带宽使用增加、其他链接加载速度变慢以及内容略显陈旧。如果您对用户接下来将访问哪个页面有很高的信心，并且您确实为用户提供了附加值，那么您应该只考虑触发预呈现。

我尝试预渲染时出错:asp-prerender-webpack-config="webpack.config.js"到我的应用程序.

<app asp-prerender-module="ClientApp/dist/main-server"
     asp-prerender-webpack-config="webpack.config.js">Loading...</app>

错误:

处理请求时发生未处理的异常.

例外:调用节点模块失败,错误:类型错误:无法读取属性 '过滤器' 的未定义在d:\项目\ aspnetocore-angular2 \node_modules\ASPNET-的WebPack\LoadViaWebpack.js:80:54在initializePromise(d:\项目\ aspnetocore-angular2 \node_modules\ASPNET-的WebPack \node_modules\ES6-承诺\ DIST\ES6-promise.js:459:5)在新的承诺(d:\项目\ aspnetocore-angular2 \node_modules\ASPNET-的WebPack \node_modules\ES6-承诺\ DIST\ES6-promise.js:871:31)在loadViaWebpackNoCache(d:\项目\ aspnetocore-angular2 \node_modules\ASPNET-的WebPack\LoadViaWebpack.js:34:12)在Object.loadViaWebpack(d:\项目\ aspnetocore-angular2 \node_modules\ASPNET-的WebPack\LoadViaWebpack.js:19:49)在findBootModule(d:\项目\ aspnetocore-angular2 \node_modules\ASPNET-预呈现\ Prerendering.js:95:29)在findBootFunc(d :\项目\ aspnetocore-angular2 \node_modules\ASPNET-预呈现\ Prerendering.js:103:5)在renderToString(d:\项目\ aspnetocore-angular2 \node_modules\ASPNET-预呈现\ Prerendering.js:10:5 )在module.exports.renderToString

webpack文件:

    var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path');
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
var merge = require('webpack-merge');
var allFilenamesExceptJavaScript = /\.(?!js(\?|$))([^.]+(\?|$))/;

// Configuration in common to both client-side and server-side bundles
var sharedConfig = {
    resolve: { extensions: …

由于 Angular Universal 在很长一段时间内都不会出现在 CLI 中，我必须使用 prerender.io 来让 SEO 正常工作。然而，经过一些测试，它似乎并没有那么好，因为它似乎没有等待延迟加载的模块，所以 SEO 仍然失败。

在他们这个位置的网站上，他们这样说：

您的页面是否仅部分呈现？

我们的 Prerender 服务器会尽力通过计算进行中的请求数来确定页面何时完成加载。一旦飞行中的请求数达到零，我们等待一小段时间，然后保存 HTML。如果这太早保存页面，您可以使用我们的 window.prerenderReady 标志通知服务器您的页面已准备好保存。

把它放在你的 HTML 中：

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

Run Code Online (Sandbox Code Playgroud)

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

window.prerenderReady = true;

Run Code Online (Sandbox Code Playgroud)

这是我不明白如何去做的地方。由于 Angular 从模板中删除脚本标签（不确定这只是 CLI 行为还是 Angular 本身），我无法设置初始脚本标签。我也无法弄清楚如何从我的组件类更新模板脚本标签内的window属性prerenderReady，因为我不能只使用window.prerenderReady = true并期望它工作，因为必须将脚本添加到模板中。

有没有人设法解决这个问题或对我如何实现这一目标有任何想法？

我有一个用 angularjs 构建的网站，并使用 prerender.io 和来自 Rapidssl 的 SSL 证书，一切正常...

除了 Facebook 没有显示页面的正确信息。

当我打开 Facebook 爬虫

Can't validate SSL Certificate. Either it is self-signed (which will cause browser warnings) or it is invalid.

并且无法识别 og:url、og:type、og:title、og:image、og:description、fb:app_id 的值

它在过去工作，但它停止工作我不知道为什么。

我用谷歌搜索并将我的 ssl.crt 和我的 intermidiate.crt 连接起来，但没有结果。

我的页面是：https : //www.granojo.com/video/10432

我对 Vue JS 比较陌生，但我想用它构建一些东西已经有一段时间了。我想要做的是将整个网站构建为 Vue JS 组件，将网站的大部分内容预渲染为静态 HTML、JS 和 CSS，但保留一些组件作为活动 Vue JS 组件。

例如，假设我的网站上有一个导航组件、一个页脚组件和一个表单组件，该组件有 3 个页面。导航和页脚出现在所有 3 页上，但表单仅出现在 1 页上。我可以在 Vue JS 中构建所有组件，然后将导航和页脚预渲染为静态，但仅将表单组件保留为网站上的实时 Vue JS 组件吗？Webpack 可以实现这样的功能吗？使用 Nuxt.js？

我希望这是有道理的，谢谢！

编辑：也许这会更清楚。假设我有一个包含 app1 和 app2 的页面。我希望 app1 在 Vue JS 中构建，但输出静态，而 app2 仍然是动态 Vue JS 组件。所以我想要的输出是这样的：

<div id="app1">

The actual rendered text

</div>

<div id="app2">

{{ message }}

</div>

我有一个基于 Angular 4 作为前端框架的网站，

我需要改进我的网站加载时间，并修复一些 SEO 问题，所以我决定使用服务器端渲染，我正在考虑两个选项，

1）预渲染

2 ) 使用带有 API 包装器的无头 chrome

我知道预渲染服务在下面使用 无头 chrome，我实施第二个选项的唯一原因是消除通过互联网将请求转发到他们的服务器所需的时间。

问题是，当我的服务器将“index.html”的请求转发到“prerender”服务时，如果我的用户已登录，我的应用程序中需要对用户进行身份验证的页面如何使用这些选项之一她的访问令牌存储在他的 LocalStorage 中，当“javascript”代码初始化时，在下一个请求中，它在 Authorization 标头中包含令牌，因此服务器可以对用户进行身份验证，但“预渲染”服务无法访问我用户的本地存储。

现在我唯一的解决方案是使用 cookie 而不是 localstorage 来存储访问令牌。

我一生都无法弄清楚这一点。以下站点托管在 Netlify 上并启用了预渲染。检查页面时，所有 OG 标签都是正确的。这些标签是使用 react-helmet 注入的。

https://browniepoints.africa/opportunities/volunteer-at-a-soup-kitchen-every-week-on-thursdays

在 Facebook 调试器上抓取上述 URL 时，它会响应：

The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id

唯一应该存在的错误/警告之一是app_id，我不在乎。

我已经等了 48 多个小时才清除缓存，我尝试使用附加到 URL 的查询字符串进行抓取，并且图像具有绝对 URL。但即使是描述标签也没有通过。

请使用 react-helmet 和 Netlify 的人对这个问题有明确的认识吗？

我有一个基本的应用程序（nuxt 版本 2.12.2），是通过运行npx create-nuxt-app并将模式设置为“SPA”而制作的。当我使用npm run buildor时npm run generate，它会为每个页面创建一个 HTML 文件，但不会预先呈现页面中的任何实际 HTML。它只有加载单页应用程序的 JavaScript。出于 SEO 的原因，我希望每个页面都有预渲染的 HTML。最好的方法是什么？

我真的很惊讶我没有在 Nuxt.js 文档中找到解决这个问题的任何内容。

使用反应快照构建反应项目时出现错误。

我环顾四周，所有错误都与 puppeteer 有关 - 但我没有像这些问题一样使用 puppeteer 直接获取内容，因此答案不适用。

我认为问题在于，当react-snap渲染我的页面时，它们正在对我的服务器进行API调用，其中一些失败是因为它们未经身份验证或其他原因。但所有其他问题都表明这与“页面在完成之前退出”有关，我不知道当我运行react-snap 脚本时这意味着什么？它不像 puppeteer 那样获取页面。（也许是？我不知道，从未使用过 puppeteer）

这是我的脚本：

  "start": "react-scripts start",
    "build": "react-scripts --max_old_space_size=4096 build && npm run build-sw && npm run clean-cra-sw",
    "clean-cra-sw": "rm -f build/precache-manifest.*.js && rm -f build/service-worker.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build-sw": "node ./src/sw-build.js",
    "postbuild": "react-snap"

这是调试日志中的错误"npm run build"

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\Spader\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build' ] …