为了准备即将到来的关于JavaScript新复兴的SMX高级会话，我决定编写一个进步的web应用程序，并试图优化它进行SEO。特别是，我对从开发/实现的角度回顾所有关键的呈现选项(客户端、服务器端、混合和动态)很感兴趣。
我学到了六条有趣的见解，我将在我的演讲中分享。其中一种见解解决了我经常看到的一个痛苦的问题，我认为尽快把它分享给大家是很重要的。我们开始吧。
部分渲染如何破坏SEO性能
当您需要在服务器端呈现JavaScript时，可能无法完全呈现整个页面内容。让我们回顾一个具体的例子。
上述AngularJs网站上的类别视图所有页面在20秒后还没有加载完所有产品图片。在我的测试中，完全加载大约需要40秒。
这里有个问题。呈现服务不会永远等待页面加载完成。例如，谷歌的动态呈现服务，Rendertron默认不会等待超过10秒。
视图-所有页面通常是用户和搜索引擎在快速加载时的首选。但是，如何快速加载一个超过400个产品图片的页面呢?
服务人员的救援
在我解释解决方案之前，让我们回顾一下服务工作者以及它们如何适用于此上下文中。德特勒夫·约翰逊将主持我们的小组讨论，他在这个话题上写了一篇很好的文章。
当我想到服务工作者时，我认为他们是运行在web浏览器中的内容传递网络。一个CDN有助于加快你的网站卸载一些网站功能到网络。一个关键的功能是缓存，但是大多数现代的CDNs可以做更多的事情，比如调整大小/压缩图像，阻止攻击，等等。
一个迷你cdn在你的浏览器同样强大。它可以拦截和以编程方式缓存来自PWA的内容。一个实际的用例是，这允许应用程序离线工作。但吸引我注意的是，由于service worker操作独立于主浏览器线程，它也可以用来卸载减慢页面加载(和渲染过程)的进程。
我的想法是:
发出一个XHR请求，以获取快速返回的产品的初始列表(例如全套中的第1页)
注册一个服务工作人员来拦截这个请求，缓存它，传递它，并在后台对集合中的其余页面进行后续请求。它也应该对它们进行缓存。
一旦加载并缓存了所有的结果，通知页面以便它得到更新。
第一次呈现页面时，它不会获得所有结果，但会在后续的页面中获得这些结果。下面是一些代码，您可以根据这些代码进行调整。
我查看了这个页面，想看看他们是否也在做类似的事情，但遗憾的是他们没有。
这种方法将防止典型的超时和错误中断页面呈现，而代价可能是在初始页面加载期间丢失一些内容。后续的页面加载应该有最新的信息，并从浏览器缓存中更快地加载。
我检查了Rendertron，看看这个想法是否被支持，我发现一个拉请求合并到他们的代码库中，以确认对所需特性的支持。
然而，由于谷歌从Renderton默认支持的机器人列表中删除了Googlebot，你需要把它添加回去才能让它工作。
服务人员的限制
当与服务工作者一起工作并将后台工作转移给他们时，您需要考虑一些约束:
服务工作者需要HTTPS
服务工作人员在安装它们的“目录级”拦截请求。例如，/test/ng-sw.js只会在/test/*下拦截请求，而/ng-sw.js会拦截整个站点的请求。
后台工作不应该需要DOM访问。也没有窗口、文档或父对象访问。
可以使用服务工作者在后台运行的一些示例任务是数据操作或遍历，如排序或搜索——也装载数据和数据生成。
更多潜在的渲染问题
在一个更普遍的方式，当使用混合或服务器端渲染(使用NodeJs)，一些问题可以包括:
XHR/Ajax请求超时。
服务器超载(内存/ CPU)。
第三方脚本下来。
当使用动态渲染(使用Chrome)，除了上述问题，一些额外的问题可以包括:
浏览器加载失败。
图片下载和渲染需要很长时间。
时间延迟
底线是，当您在服务器端呈现页面时，如果存在阻碍完整、正确呈现的问题，所呈现的内容可能与显示给最终用户(或搜索机器人)的内容存在重大差异。
有三个潜在的问题:1)重要的内容没有被索引2)意外隐藏和3)合规性问题。
我们还没有看到a