简体繁体 English

仅具有prerender.io客户端的Prerender Angular 7 SPA

[英]Prerender Angular 7 SPA with prerender.io client-side only

原文 2019-02-26 14:15:15 8 1 angular/ seo/ angular6/ angular7/ prerender

I have an Angular 7 application where I am trying to pre-render pages to support web crawlers / SEO. 我有一个Angular 7应用程序，我在其中尝试预渲染页面以支持Web爬网程序/ SEO。 I've decided I want to use prerender.io to facilitate the pre-rendering, caching, and serving of static HTML to these crawlers, but I'm struggling to install their middleware in my Angular 7 app. 我已经决定要使用prerender.io来促进这些爬网程序的预渲染，缓存和静态HTML的提供，但是我正在努力在Angular 7应用中安装它们的中间件。

I am trying to figure out if I can use prerender.io in a purely client-side manner, as I am not serving angular from a Node server, I am just hosting static files in a CDN. 我正在尝试确定是否可以以纯客户端方式使用prerender.io，因为我不是从Node服务器提供角度服务，而是在CDN中托管静态文件。 According to their docs , there is a middleware I can install that will detect when a web crawler makes a page request, and redirects the request to the pre-rendering server. 根据他们的文档，我可以安装一个中间件，该中间件可以检测Web爬网程序何时发出页面请求，并将请求重定向到预渲染服务器。 However, all the examples I find involve modifying some backend node server. 但是，我发现的所有示例都涉及修改某些后端节点服务器。 Can't I do this all client-side? 我不能在所有客户端上都这样做吗？

My questions are: does angular have the concept of a root-level app (I'm assuming it does), and if so, is it possible to install the prerender.io middleware such that it functions in a manner I described above? 我的问题是：angular是否具有根级应用程序的概念（我假设它具有），如果是这样，是否可以安装prerender.io中间件，使其以我上面描述的方式运行？

It seems like there are a few tutorials for AngularJS, but things have changed quite a bit since then. 似乎有一些有关AngularJS的教程，但此后发生了很大的变化。 Any help would be appreciated! 任何帮助，将不胜感激！

1 个解决方案

After taking a step back and understanding how this technology works, I am now realizing that a client-side solution doesn't make any sense for prerender.io. 在退后一步并了解了这项技术的工作原理之后，我现在意识到客户端解决方案对于prerender.io没有任何意义。 Hence, why I was so confused. 因此，为什么我如此困惑。

What prerendering is trying to solve is delivering static HTML to crawlers that simply cannot interpret a site rendered by Javascript. prerendering试图解决的问题是向无法完全解释Javascript呈现的网站的爬网程序提供静态HTML。 Therefore, what I was trying to do makes no sense (implementing the redirection / logic into Angular on the client), as it would require the web crawler to be javascript aware. 因此，我试图做的事没有任何意义（在客户端上将重定向/逻辑实现到Angular中），因为这将要求Web爬网程序了解JavaScript。

Instead I need to implement a user-agent check at my loadbalancer, which will direct traffic for prerendering. 相反，我需要在我的负载均衡器上执行用户代理检查，该检查将引导流量进行预渲染。 I'm going to set up an NGINX server that will point to my CDN for normal traffic, and a prerendering server if a crawler is detected. 我将设置一个NGINX服务器，该服务器将指向我的CDN以进行正常通信，如果要检测到搜寻器，则将设置一个预渲染服务器。

Edit: And here is how to do it! 编辑：这是怎么做！ https://medium.com/@damwhitaker/using-aws-ec2-nginx-and-prerender-io-as-a-proxy-for-a-single-page-app-2c3769689060 https://medium.com/@damwhitaker/using-aws-ec2-nginx-and-prerender-io-as-a-proxy-for-a-single-page-app-2c3769689060